|
1
|
1 <!doctype html>
|
|
21
|
2 <html lang="en">
|
|
1
|
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>
|
