Mercurial Hosting > dad

comparison src/alternatives/draggabilly.html @ 2:264646feb67b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add draggabilly
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 20 Apr 2023 15:55:43 -0600
parents src/alternatives/interactjs.html@9c372fce698a
children eee8862be4c7
comparison
equal deleted inserted replaced
1:9c372fce698a 2:264646feb67b
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;
13 cursor: move;
14 }
15 div[drag].is-dragging {
16 z-index: 1;
17 }
18 </style>
19 <script src="https://unpkg.com/draggabilly@3.0.0/dist/draggabilly.pkgd.js"></script>
20 <script>
21 'use strict';
22
23 let dragEntered;
24
25 function onDragStart( event, pointer ) {
26 dragEntered = null;
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
37 function onDragEnter(dragging,entered) {
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
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
86 function init() {
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 }
96 }
97 </script>
98 </head>
99 <body>
100 <h1><a href="https://draggabilly.desandro.com/">Draggabilly</a></h1>
101
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>
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>