|
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 background-color: LightGreen;
|
|
2
|
13 cursor: move;
|
|
|
14 }
|
|
|
15 div[drag].is-dragging {
|
|
|
16 z-index: 1;
|
|
1
|
17 }
|
|
|
18 </style>
|
|
2
|
19 <script src="https://unpkg.com/draggabilly@3.0.0/dist/draggabilly.pkgd.js"></script>
|
|
1
|
20 <script>
|
|
|
21 'use strict';
|
|
|
22
|
|
2
|
23 let dragEntered;
|
|
1
|
24
|
|
2
|
25 function onDragStart( event, pointer ) {
|
|
|
26 dragEntered = null;
|
|
1
|
27 }
|
|
|
28
|
|
|
29 function indexOf(a,el) {
|
|
|
30 for( let i=0; i<a.length; i++ ) {
|
|
|
31 if( a[i] === el )
|
|
|
32 return i;
|
|
|
33 }
|
|
|
34 return -1;
|
|
|
35 }
|
|
|
36
|
|
2
|
37 function onDragEnter(dragging,entered) {
|
|
1
|
38 let divs = document.querySelectorAll('div[drag]');
|
|
|
39 let iEntered = indexOf(divs,entered);
|
|
|
40 let iDragging = indexOf(divs,dragging);
|
|
|
41 console.log(iDragging+' '+iEntered);
|
|
|
42 let parent = entered.parentNode;
|
|
|
43 if( iDragging < iEntered ) {
|
|
|
44 let next = divs[iEntered+1];
|
|
|
45 if( next ) {
|
|
|
46 parent.insertBefore( dragging, next );
|
|
|
47 } else {
|
|
|
48 parent.appendChild( dragging );
|
|
|
49 }
|
|
|
50 } else {
|
|
|
51 parent.insertBefore( dragging, entered );
|
|
|
52 }
|
|
|
53 }
|
|
|
54
|
|
2
|
55 function onDragMove( event, pointer, moveVector ) {
|
|
|
56 let target = pointer.target;
|
|
|
57 let x = pointer.clientX;
|
|
|
58 let y = pointer.clientY;
|
|
|
59 let divs = document.querySelectorAll('div[drag]');
|
|
|
60 for( let i=0; i<divs.length; i++ ) {
|
|
|
61 let div = divs[i];
|
|
|
62 if( div === target )
|
|
|
63 continue;
|
|
|
64 let rect = div.getBoundingClientRect();
|
|
|
65 if( rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height ) {
|
|
|
66 if( div !== dragEntered ) {
|
|
|
67 dragEntered = div;
|
|
|
68 onDragEnter(target,div);
|
|
|
69 }
|
|
|
70 break;
|
|
|
71 }
|
|
|
72 }
|
|
|
73 }
|
|
|
74
|
|
|
75 function onDragEnd( event, pointer ) {
|
|
|
76 //console.log('onDragEnd');
|
|
|
77 //console.log(event);
|
|
|
78 //console.log(pointer);
|
|
|
79 let target = pointer.target;
|
|
|
80 //target.style.left = null;
|
|
|
81 //target.style.top = null;
|
|
|
82 target.draggie.setPosition(0,0);
|
|
|
83 //console.log(target.draggie.position);
|
|
|
84 }
|
|
|
85
|
|
1
|
86 function init() {
|
|
2
|
87 let divs = document.querySelectorAll('div[drag]');
|
|
|
88 for( let i=0; i<divs.length; i++ ) {
|
|
|
89 let div = divs[i];
|
|
|
90 let draggie = new Draggabilly(div,{});
|
|
|
91 draggie.on( 'dragStart', onDragStart );
|
|
|
92 draggie.on( 'dragMove', onDragMove );
|
|
|
93 draggie.on( 'dragEnd', onDragEnd );
|
|
|
94 div.draggie = draggie;
|
|
|
95 }
|
|
1
|
96 }
|
|
|
97 </script>
|
|
|
98 </head>
|
|
|
99 <body>
|
|
2
|
100 <h1><a href="https://draggabilly.desandro.com/">Draggabilly</a></h1>
|
|
1
|
101
|
|
2
|
102 <p>This supports drag but not drop. When I try to implement drop in a list, it gets confused when the DOM changes.</p>
|
|
1
|
103
|
|
|
104 <div>
|
|
|
105 <script>
|
|
|
106 for( let i=1; i<=10; i++ ) {
|
|
|
107 document.write(`
|
|
|
108 <div drag id="${i}">${i} - drag me</div>
|
|
|
109 ` );
|
|
|
110 }
|
|
|
111 </script>
|
|
|
112 </div>
|
|
|
113 </body>
|
|
|
114 <script> init(); </script>
|
|
|
115 </html>
|
