|
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 dragEnterListener(event) {
|
|
3
|
38 //return;
|
|
1
|
39 console.log(event);
|
|
|
40 let entered = event.target;
|
|
|
41 let dragging = event.relatedTarget;
|
|
|
42 if( entered === dragging )
|
|
|
43 return;
|
|
24
|
44 let divs = Array.from(document.querySelectorAll('div[drag]'));
|
|
|
45 let iEntered = divs.indexOf(entered);
|
|
|
46 let iDragging = divs.indexOf(dragging);
|
|
1
|
47 console.log(iDragging+' '+iEntered);
|
|
|
48 let parent = entered.parentNode;
|
|
|
49 if( iDragging < iEntered ) {
|
|
|
50 let next = divs[iEntered+1];
|
|
|
51 if( next ) {
|
|
|
52 parent.insertBefore( dragging, next );
|
|
|
53 } else {
|
|
|
54 parent.appendChild( dragging );
|
|
|
55 }
|
|
|
56 } else {
|
|
|
57 parent.insertBefore( dragging, entered );
|
|
|
58 }
|
|
|
59 }
|
|
|
60
|
|
|
61 function init() {
|
|
|
62 let dad = interact('div[drag]');
|
|
|
63 dad.draggable({
|
|
3
|
64 autoScroll: true,
|
|
1
|
65 listeners: {
|
|
|
66 start: dragStartListener,
|
|
|
67 move: dragMoveListener,
|
|
|
68 end: dragEndListener,
|
|
|
69 }
|
|
|
70 });
|
|
|
71 dad.dropzone({
|
|
|
72 ondragenter: dragEnterListener,
|
|
|
73 });
|
|
|
74 }
|
|
|
75 </script>
|
|
|
76 </head>
|
|
|
77 <body>
|
|
|
78 <h1><a href="https://interactjs.io/">interact.js</a></h1>
|
|
|
79
|
|
9
|
80 <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
|
81
|
|
|
82 <div>
|
|
|
83 <script>
|
|
|
84 for( let i=1; i<=10; i++ ) {
|
|
|
85 document.write(`
|
|
|
86 <div drag id="${i}">${i} - drag me</div>
|
|
|
87 ` );
|
|
|
88 }
|
|
|
89 </script>
|
|
|
90 </div>
|
|
|
91 </body>
|
|
|
92 <script> init(); </script>
|
|
|
93 </html>
|
