1
+ − 1 <!doctype html>
+ − 2 <html>
+ − 3 <head>
+ − 4 <meta name="viewport" content="width=device-width, initial-scale=1">
+ − 5 <style>
+ − 6 @import "/site.css";
+ − 7
+ − 8 div[drag] {
+ − 9 border: 1px solid;
+ − 10 margin: 8px;
+ − 11 padding: 8px;
+ − 12 touch-action: none;
+ − 13 background-color: LightGreen;
+ − 14 }
+ − 15 </style>
+ − 16 <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js"></script>
+ − 17 <script>
+ − 18 'use strict';
+ − 19
+ − 20 let dxDrag, dyDrag;
+ − 21
+ − 22 function dragStartListener(event) {
+ − 23 dxDrag = 0;
+ − 24 dyDrag = 0;
+ − 25 }
+ − 26
+ − 27 function dragMoveListener(event) {
+ − 28 dxDrag += event.dx;
+ − 29 dyDrag += event.dy;
+ − 30 event.target.style.transform = `translate(${dxDrag}px, ${dyDrag}px)`;
+ − 31 }
+ − 32
+ − 33 function dragEndListener(event) {
+ − 34 event.target.style.transform = null;
+ − 35 }
+ − 36
+ − 37 function indexOf(a,el) {
+ − 38 for( let i=0; i<a.length; i++ ) {
+ − 39 if( a[i] === el )
+ − 40 return i;
+ − 41 }
+ − 42 return -1;
+ − 43 }
+ − 44
+ − 45 function dragEnterListener(event) {
3
+ − 46 //return;
1
+ − 47 console.log(event);
+ − 48 let entered = event.target;
+ − 49 let dragging = event.relatedTarget;
+ − 50 if( entered === dragging )
+ − 51 return;
+ − 52 let divs = document.querySelectorAll('div[drag]');
+ − 53 let iEntered = indexOf(divs,entered);
+ − 54 let iDragging = indexOf(divs,dragging);
+ − 55 console.log(iDragging+' '+iEntered);
+ − 56 let parent = entered.parentNode;
+ − 57 if( iDragging < iEntered ) {
+ − 58 let next = divs[iEntered+1];
+ − 59 if( next ) {
+ − 60 parent.insertBefore( dragging, next );
+ − 61 } else {
+ − 62 parent.appendChild( dragging );
+ − 63 }
+ − 64 } else {
+ − 65 parent.insertBefore( dragging, entered );
+ − 66 }
+ − 67 }
+ − 68
+ − 69 function init() {
+ − 70 let dad = interact('div[drag]');
+ − 71 dad.draggable({
3
+ − 72 autoScroll: true,
1
+ − 73 listeners: {
+ − 74 start: dragStartListener,
+ − 75 move: dragMoveListener,
+ − 76 end: dragEndListener,
+ − 77 }
+ − 78 });
+ − 79 dad.dropzone({
+ − 80 ondragenter: dragEnterListener,
+ − 81 });
+ − 82 }
+ − 83 </script>
+ − 84 </head>
+ − 85 <body>
+ − 86 <h1><a href="https://interactjs.io/">interact.js</a></h1>
+ − 87
9
+ − 88 <p>This has a number of problems. First, it is clearly too complicated. And this means that it isn't on just one JavaScript file. One has to use the modern horror of <b>npm</b> to get it (which I refuse to do). The suggested way of handling dragging doesn't work when the DOM changes, as the example below shows. There is probably some complicated way around this, but I can't be bothered given the other issues. The file that one needs to include is <a href="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js">interact.js</a>.</p>
1
+ − 89
+ − 90 <div>
+ − 91 <script>
+ − 92 for( let i=1; i<=10; i++ ) {
+ − 93 document.write(`
+ − 94 <div drag id="${i}">${i} - drag me</div>
+ − 95 ` );
+ − 96 }
+ − 97 </script>
+ − 98 </div>
+ − 99 </body>
+ − 100 <script> init(); </script>
+ − 101 </html>
