Mercurial Hosting > dad
diff src/dad.js @ 11:80ef70ca5860
add onStart
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Thu, 11 May 2023 14:37:10 -0600 |
parents | ad2f6525c4c5 |
children | 66e427a8d046 |
line wrap: on
line diff
--- a/src/dad.js Thu May 11 13:07:00 2023 -0600 +++ b/src/dad.js Thu May 11 14:37:10 2023 -0600 @@ -7,10 +7,11 @@ dad.whatToDrag = function(draggable) { return draggable; }; + dad.onStart = function(event) {}; + dad.onEnter = function(event) {}; + dad.onLeave = function(event) {}; dad.onDrop = function(event) {}; dad.onDropped = function(event) {}; - dad.onEnter = function(event) {}; - dad.onLeave = function(event) {}; let original = null; @@ -22,6 +23,15 @@ return rect.x <= x && x <= rect.x+rect.width && rect.y <= y && y <= rect.y+rect.height; } + function myEvent(mouseEvent) { + return { + original: original, + dragging: dragging, + dropzone: dropzone, + mouseEvent: mouseEvent, + }; + } + function onMouseMove(event) { { event.preventDefault(); @@ -40,12 +50,7 @@ let y = event.clientY; if( !(dropzone && isIn(x,y,dropzone.getBoundingClientRect())) ) { if( dropzone ) { - dad.onLeave({ - original: original, - dragging: dragging, - dropzone: dropzone, - mouseEvent: event, - }); + dad.onLeave(myEvent(event)); dropzone = null; } let dropzones = document.querySelectorAll('[dad-dropzone]'); @@ -55,12 +60,7 @@ continue; if( isIn(x,y,dz.getBoundingClientRect()) ) { dropzone = dz; - dad.onEnter({ - original: original, - dragging: dragging, - dropzone: dropzone, - mouseEvent: event, - }); + dad.onEnter(myEvent(event)); break; } } @@ -85,19 +85,9 @@ } function onMouseUp(event) { - dad.onDrop({ - original: original, - dragging: dragging, - dropzone: dropzone, - mouseEvent: event, - }); + dad.onDrop(myEvent(event)); if( dropzone ) { - dad.onLeave({ - original: original, - dragging: dragging, - dropzone: dropzone, - mouseEvent: event, - }); + dad.onLeave(myEvent(event)); } original.removeAttribute('dad-original'); dragging.parentNode.removeChild(dragging); @@ -126,6 +116,7 @@ dragging.style.width = `${rect.width}px`; dragging.style.heigh = `${rect.heigh}px`; original.parentNode.appendChild(dragging); + dad.onStart(myEvent(event)); } function onMouseDown(event) {