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
9
+ − 102 <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
+ − 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>
