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