Mercurial Hosting > dad

comparison src/dad.js @ 11:80ef70ca5860

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add onStart
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 11 May 2023 14:37:10 -0600
parents ad2f6525c4c5
children 66e427a8d046
comparison
equal deleted inserted replaced
10:ad2f6525c4c5 11:80ef70ca5860
5 { 5 {
6 // override these if needed 6 // override these if needed
7 dad.whatToDrag = function(draggable) { 7 dad.whatToDrag = function(draggable) {
8 return draggable; 8 return draggable;
9 }; 9 };
10 dad.onStart = function(event) {};
11 dad.onEnter = function(event) {};
12 dad.onLeave = function(event) {};
10 dad.onDrop = function(event) {}; 13 dad.onDrop = function(event) {};
11 dad.onDropped = function(event) {}; 14 dad.onDropped = function(event) {};
12 dad.onEnter = function(event) {};
13 dad.onLeave = function(event) {};
14 15
15 16
16 let original = null; 17 let original = null;
17 let dragging = null; 18 let dragging = null;
18 let dropzone = null; 19 let dropzone = null;
19 let touchX, touchY; 20 let touchX, touchY;
20 21
21 function isIn(x,y,rect) { 22 function isIn(x,y,rect) {
22 return rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height; 23 return rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height;
24 }
25
26 function myEvent(mouseEvent) {
27 return {
28 original: original,
29 dragging: dragging,
30 dropzone: dropzone,
31 mouseEvent: mouseEvent,
32 };
23 } 33 }
24 34
25 function onMouseMove(event) { 35 function onMouseMove(event) {
26 { 36 {
27 event.preventDefault(); 37 event.preventDefault();
38 { 48 {
39 let x = event.clientX; 49 let x = event.clientX;
40 let y = event.clientY; 50 let y = event.clientY;
41 if( !(dropzone && isIn(x,y,dropzone.getBoundingClientRect())) ) { 51 if( !(dropzone && isIn(x,y,dropzone.getBoundingClientRect())) ) {
42 if( dropzone ) { 52 if( dropzone ) {
43 dad.onLeave({ 53 dad.onLeave(myEvent(event));
44 original: original,
45 dragging: dragging,
46 dropzone: dropzone,
47 mouseEvent: event,
48 });
49 dropzone = null; 54 dropzone = null;
50 } 55 }
51 let dropzones = document.querySelectorAll('[dad-dropzone]'); 56 let dropzones = document.querySelectorAll('[dad-dropzone]');
52 for( let i=0; i<dropzones.length; i++ ) { 57 for( let i=0; i<dropzones.length; i++ ) {
53 let dz = dropzones[i]; 58 let dz = dropzones[i];
54 if( dz === dragging ) 59 if( dz === dragging )
55 continue; 60 continue;
56 if( isIn(x,y,dz.getBoundingClientRect()) ) { 61 if( isIn(x,y,dz.getBoundingClientRect()) ) {
57 dropzone = dz; 62 dropzone = dz;
58 dad.onEnter({ 63 dad.onEnter(myEvent(event));
59 original: original,
60 dragging: dragging,
61 dropzone: dropzone,
62 mouseEvent: event,
63 });
64 break; 64 break;
65 } 65 }
66 } 66 }
67 } 67 }
68 } 68 }
83 touchY = y; 83 touchY = y;
84 onMouseMove(event); 84 onMouseMove(event);
85 } 85 }
86 86
87 function onMouseUp(event) { 87 function onMouseUp(event) {
88 dad.onDrop({ 88 dad.onDrop(myEvent(event));
89 original: original,
90 dragging: dragging,
91 dropzone: dropzone,
92 mouseEvent: event,
93 });
94 if( dropzone ) { 89 if( dropzone ) {
95 dad.onLeave({ 90 dad.onLeave(myEvent(event));
96 original: original,
97 dragging: dragging,
98 dropzone: dropzone,
99 mouseEvent: event,
100 });
101 } 91 }
102 original.removeAttribute('dad-original'); 92 original.removeAttribute('dad-original');
103 dragging.parentNode.removeChild(dragging); 93 dragging.parentNode.removeChild(dragging);
104 document.removeEventListener('mousemove',onMouseMove); 94 document.removeEventListener('mousemove',onMouseMove);
105 document.removeEventListener('mouseup',onMouseUp); 95 document.removeEventListener('mouseup',onMouseUp);
124 dragging.style.left = `${rect.x}px`; 114 dragging.style.left = `${rect.x}px`;
125 dragging.style.top = `${rect.y}px`; 115 dragging.style.top = `${rect.y}px`;
126 dragging.style.width = `${rect.width}px`; 116 dragging.style.width = `${rect.width}px`;
127 dragging.style.heigh = `${rect.heigh}px`; 117 dragging.style.heigh = `${rect.heigh}px`;
128 original.parentNode.appendChild(dragging); 118 original.parentNode.appendChild(dragging);
119 dad.onStart(myEvent(event));
129 } 120 }
130 121
131 function onMouseDown(event) { 122 function onMouseDown(event) {
132 start(event); 123 start(event);
133 document.addEventListener('mousemove',onMouseMove); 124 document.addEventListener('mousemove',onMouseMove);