Skip to content

Commit f51adca

Browse files
sunpietrosunpietro
authored
Fixed an issue with dropping elements outside regions (#36)
1 parent 6df673e commit f51adca

6 files changed

+57
-37
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dragsterjs",
3-
"version": "1.4.1",
3+
"version": "1.4.2",
44
"homepage": "https://github.com/sunpietro/dragster",
55
"authors": [
66
"Piotr Nalepa <poczta@piotrnalepa.pl>"

‎dragster.js

+50-30
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*@preserve
2-
* Dragster - drag'n'drop library v1.4.1
2+
* Dragster - drag'n'drop library v1.4.2
33
* https://github.com/sunpietro/dragster
44
*
55
* Copyright 2015-2017 Piotr Nalepa
@@ -8,7 +8,7 @@
88
* Released under the MIT license
99
* https://github.com/sunpietro/dragster/blob/master/LICENSE
1010
*
11-
* Date: 2017-02-07T16:30Z
11+
* Date: 2017-03-30T16:30Z
1212
*/
1313
(function (window, document) {
1414
'use strict';
@@ -171,6 +171,7 @@
171171
updateRegionsHeight,
172172
scrollWindow,
173173
discoverWindowHeight,
174+
resetDragsterWorkspace,
174175
dropActions,
175176
moveActions,
176177
shadowElementPositionXDiff,
@@ -481,6 +482,19 @@
481482
}
482483
};
483484

485+
/**
486+
* Resets DragsterJS workspace by removing mouseup/touchend event listeners
487+
*
488+
* @method resetDragsterWorkspace
489+
* @private
490+
* @param moveEvent {String} move event name (either mousemove or touchmove)
491+
* @param upEvent {String} up event name (either mouseup or touchend)
492+
*/
493+
resetDragsterWorkspace = function (moveEvent, upEvent) {
494+
cleanWorkspace(draggedElement, moveEvent);
495+
cleanWorkspace(draggedElement, upEvent);
496+
};
497+
484498
regionEventHandlers = {
485499
/*
486500
* `mousedown` or `touchstart` event handler.
@@ -495,15 +509,16 @@
495509
if (finalParams.dragHandleCssClass &&
496510
(typeof finalParams.dragHandleCssClass !== 'string' ||
497511
!event.target.classList.contains(finalParams.dragHandleCssClass))) {
498-
return false;
512+
return FALSE;
499513
}
500514

501515
var targetRegion,
502-
listenToEventName,
516+
moveEvent,
517+
upEvent,
518+
isTouch = event.type === EVT_TOUCHSTART,
503519
eventObject = event.changedTouches ? event.changedTouches[0] : event;
504520

505521
dragsterEventInfo = JSON.parse(JSON.stringify(defaultDragsterEventInfo));
506-
507522
event.dragster = dragsterEventInfo;
508523

509524
if (finalParams.onBeforeDragStart(event) === FALSE || event.which === 3 /* detect right click */) {
@@ -512,20 +527,23 @@
512527

513528
event.preventDefault();
514529

515-
listenToEventName = event.type === EVT_TOUCHSTART ? EVT_TOUCHMOVE : EVT_MOUSEMOVE;
516-
517-
regions.forEach(function (region) {
518-
region.addEventListener(listenToEventName, regionEventHandlers.mousemove);
519-
});
520-
521-
document.body.addEventListener(listenToEventName, regionEventHandlers.mousemove);
522-
523530
draggedElement = getElement(event.target, isDraggableCallback);
524531

525532
if (!draggedElement) {
526533
return FALSE;
527534
}
528535

536+
moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE;
537+
upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP;
538+
539+
regions.forEach(function (region) {
540+
region.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE);
541+
region.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE);
542+
});
543+
544+
document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE);
545+
document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE);
546+
529547
targetRegion = draggedElement.getBoundingClientRect();
530548

531549
shadowElementPositionXDiff = targetRegion.left - eventObject.clientX;
@@ -632,25 +650,32 @@
632650
mouseup: function (event) {
633651
event.dragster = dragsterEventInfo;
634652

653+
var isTouch = event.type === EVT_TOUCHSTART,
654+
moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE,
655+
upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP,
656+
findByClass,
657+
dropTarget,
658+
dropDraggableTarget,
659+
isFromDragOnlyRegion,
660+
canBeCloned;
661+
635662
if (finalParams.onBeforeDragEnd(event) === FALSE) {
663+
resetDragsterWorkspace(moveEvent, upEvent);
664+
636665
return FALSE;
637666
}
638667

639-
var findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER,
640-
dropTarget = document.getElementsByClassName(findByClass)[0],
641-
dropDraggableTarget,
642-
isFromDragOnlyRegion = !!(draggedElement && getElement(draggedElement, isInDragOnlyRegionCallback)),
643-
unlistenToEventName = event.type === EVT_TOUCHSTART ? EVT_TOUCHMOVE : EVT_MOUSEMOVE,
644-
canBeCloned = finalParams.cloneElements && isFromDragOnlyRegion;
668+
findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER;
669+
dropTarget = document.getElementsByClassName(findByClass)[0];
670+
isFromDragOnlyRegion = !!(draggedElement && getElement(draggedElement, isInDragOnlyRegionCallback)),
671+
canBeCloned = finalParams.cloneElements && isFromDragOnlyRegion;
645672

646-
hideShadowElementTimeout = setTimeout(function () {
647-
cleanWorkspace(draggedElement, unlistenToEventName);
648-
}, 200);
673+
hideShadowElementTimeout = setTimeout(resetDragsterWorkspace, 200);
649674

650675
cleanReplacables();
651676

652677
if (!draggedElement || !dropTarget) {
653-
cleanWorkspace(draggedElement, unlistenToEventName);
678+
resetDragsterWorkspace(moveEvent, upEvent);
654679

655680
return FALSE;
656681
}
@@ -676,7 +701,7 @@
676701
dropDraggableTarget.classList.remove(CLASS_DRAGOVER);
677702
}
678703

679-
cleanWorkspace(draggedElement, unlistenToEventName);
704+
resetDragsterWorkspace(moveEvent, upEvent);
680705

681706
finalParams.onAfterDragEnd(event);
682707
}
@@ -892,19 +917,14 @@
892917

893918
wrapDraggableElements(draggableElements);
894919

895-
document.body.addEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE);
896-
document.body.addEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE);
897-
898920
// add `mousedown`/`touchstart` and `mouseup`/`touchend` event listeners to regions
899921
regions.forEach(function (region) {
900922
region.classList.add(CLASS_REGION);
901923
region.dataset.dragsterId = dragsterId;
902924

903925
region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE);
904-
region.addEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE);
905-
906926
region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE);
907-
region.addEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE);
927+
908928
});
909929

910930
window.addEventListener('resize', discoverWindowHeight, false);

0 commit comments

Comments
 (0)