Mercurial Hosting > dad

comparison src/dad.js @ 6:4d699321068f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add dropzones
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 18:34:12 -0600
parents 1293cb0d30da
children 969d5980b375
comparison
equal deleted inserted replaced
5:1293cb0d30da 6:4d699321068f
7 dad.whatToDrag = function(draggable) { 7 dad.whatToDrag = function(draggable) {
8 return draggable; 8 return draggable;
9 }; 9 };
10 dad.onDrop = function(event) {}; 10 dad.onDrop = function(event) {};
11 dad.onDropped = function(event) {}; 11 dad.onDropped = function(event) {};
12 dad.onEnter = function(event) {};
13 dad.onLeave = function(event) {};
12 14
13 15
14 let original = null; 16 let original = null;
15 let dragging = null; 17 let dragging = null;
18 let dropzone = null;
16 let touchX, touchY; 19 let touchX, touchY;
20
21 function isIn(x,y,rect) {
22 return rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height;
23 }
17 24
18 function onMouseMove(event) { 25 function onMouseMove(event) {
19 //console.log(event); 26 //console.log(event);
20 event.preventDefault(); 27 {
21 let rect = dragging.getBoundingClientRect(); 28 event.preventDefault();
22 dragging.style.left = `${rect.x+event.movementX}px`; 29 let rect = dragging.getBoundingClientRect();
23 let y = rect.y + event.movementY; 30 dragging.style.left = `${rect.x+event.movementX}px`;
24 if( y < 0 ) { 31 let y = rect.y + event.movementY;
25 window.scrollBy( 0, y ); 32 if( y < 0 ) {
26 } else if( y + rect.height > window.innerHeight ) { 33 window.scrollBy( 0, y );
27 window.scrollBy( 0, y + rect.height - window.innerHeight ); 34 } else if( y + rect.height > window.innerHeight ) {
35 window.scrollBy( 0, y + rect.height - window.innerHeight );
36 }
37 dragging.style.top = `${y}px`;
28 } 38 }
29 dragging.style.top = `${y}px`; 39 {
40 let x = event.clientX;
41 let y = event.clientY;
42 if( !(dropzone && isIn(x,y,dropzone.getBoundingClientRect())) ) {
43 if( dropzone ) {
44 dad.onLeave({
45 original: original,
46 dragging: dragging,
47 dropzone: dropzone,
48 mouseEvent: event,
49 });
50 dropzone = null;
51 }
52 let dropzones = document.querySelectorAll('[dad-dropzone]');
53 for( let i=0; i<dropzones.length; i++ ) {
54 let dz = dropzones[i];
55 if( dz === dragging )
56 continue;
57 if( isIn(x,y,dz.getBoundingClientRect()) ) {
58 dropzone = dz;
59 dad.onEnter({
60 original: original,
61 dragging: dragging,
62 dropzone: dropzone,
63 mouseEvent: event,
64 });
65 break;
66 }
67 }
68 }
69 }
30 } 70 }
31 71
32 function onTouchMove(event) { 72 function onTouchMove(event) {
33 let touches = event.touches; 73 let touches = event.touches;
34 if( touches.length !== 1 ) 74 if( touches.length !== 1 )
35 return; 75 return;
36 let touch = touches[0]; 76 let touch = touches[0];
37 let x = touch.clientX; 77 let x = touch.clientX;
38 let y = touch.clientY; 78 let y = touch.clientY;
79 event.clientX = x;
80 event.clientY = y;
39 event.movementX = x - touchX; 81 event.movementX = x - touchX;
40 event.movementY = y - touchY; 82 event.movementY = y - touchY;
41 touchX = x; 83 touchX = x;
42 touchY = y; 84 touchY = y;
43 onMouseMove(event); 85 onMouseMove(event);
46 function onMouseUp(event) { 88 function onMouseUp(event) {
47 //console.log(event); 89 //console.log(event);
48 dad.onDrop({ 90 dad.onDrop({
49 original: original, 91 original: original,
50 dragging: dragging, 92 dragging: dragging,
93 dropzone: dropzone,
51 mouseEvent: event, 94 mouseEvent: event,
52 }); 95 });
96 if( dropzone ) {
97 dad.onLeave({
98 original: original,
99 dragging: dragging,
100 dropzone: dropzone,
101 mouseEvent: event,
102 });
103 }
53 original.removeAttribute('dad-original'); 104 original.removeAttribute('dad-original');
54 dragging.parentNode.removeChild(dragging); 105 dragging.parentNode.removeChild(dragging);
55 document.removeEventListener('mousemove',onMouseMove); 106 document.removeEventListener('mousemove',onMouseMove);
56 document.removeEventListener('mouseup',onMouseUp); 107 document.removeEventListener('mouseup',onMouseUp);
57 document.removeEventListener('mousemove',onMouseMove); 108 document.removeEventListener('mousemove',onMouseMove);
60 let droppedEvent = { 111 let droppedEvent = {
61 original: original, 112 original: original,
62 }; 113 };
63 original = null; 114 original = null;
64 dragging = null; 115 dragging = null;
116 dropzone = null;
65 dad.onDropped(droppedEvent); 117 dad.onDropped(droppedEvent);
66 } 118 }
67 119
68 function start(event) { 120 function start(event) {
69 //console.log(event); 121 //console.log(event);
98 dad.setDraggable = function(el) { 150 dad.setDraggable = function(el) {
99 el.setAttribute('dad-drag',''); 151 el.setAttribute('dad-drag','');
100 el.addEventListener('mousedown',onMouseDown); 152 el.addEventListener('mousedown',onMouseDown);
101 el.addEventListener('touchstart',onTouchStart); 153 el.addEventListener('touchstart',onTouchStart);
102 }; 154 };
155
156 dad.setDropzone = function(el) {
157 el.setAttribute('dad-dropzone','');
158 };
103 } 159 }