Skip to content

Commit

Permalink
provide lift api to manually start drag operations while mouse is down
Browse files Browse the repository at this point in the history
  • Loading branch information
bevacqua committed Oct 5, 2015
1 parent 2570e70 commit b604c08
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 9 deletions.
29 changes: 20 additions & 9 deletions dragula.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function dragula (initialContainers, options) {
containers: o.containers,
start: manualStart,
end: end,
lift: lift,
cancel: cancel,
remove: remove,
destroy: destroy,
Expand Down Expand Up @@ -112,27 +113,37 @@ function dragula (initialContainers, options) {
}
}

function startBecauseMouseMoved (e) {
if (!_grabbed) {
return;
}

if (e.clientX === _moveX && e.clientY === _moveY) {
function lift (el) {
var grabbed = _grabbed = canStart(el);
if (!grabbed) {
return;
}
_offsetX = _offsetY = 0; // we could calc these on mousemove but 0,0 is simpler
startOnLift();
}

function startOnLift () {
var grabbed = _grabbed; // call to end() unsets _grabbed
eventualMovements(true);
movements();
end();
start(grabbed);
classes.add(_copy || _item, 'gu-transit');
renderMirrorImage();
}

function startBecauseMouseMoved (e) {
if (!_grabbed) {
return;
}
if (e.clientX === _moveX && e.clientY === _moveY) {
return;
}
startOnLift();

var offset = getOffset(_item);
_offsetX = getCoord('pageX', e) - offset.left;
_offsetY = getCoord('pageY', e) - offset.top;

classes.add(_copy || _item, 'gu-transit');
renderMirrorImage();
drag(e);
}

Expand Down
5 changes: 5 additions & 0 deletions readme.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ Have you ever wanted a drag and drop library that just works? That doesn't just
- A shadow where the item would be dropped offers **visual feedback**
- Touch events!
- Seamlessly handles clicks *without any configuration*
- Comprehensive programmatic API

# Install

Expand Down Expand Up @@ -226,6 +227,10 @@ This property will be `true` whenever an element is being dragged.

Enter drag mode **without a shadow**. This method is most useful when providing complementary keyboard shortcuts to an existing drag and drop solution. Even though a shadow won't be created at first, the user will get one as soon as they click on `item` and start dragging it around. Note that if they click and drag something else, `.end` will be called before picking up the new item.

#### `drake.lift(item)`

Enter drag mode **with a shadow**. This method is most useful when we want to delay drags using customized functionality. This method is best used while the user is holding their mouse button.

#### `drake.end()`

Gracefully end the drag event as if using **the last position marked by the preview shadow** as the drop target. The proper `cancel` or `drop` event will be fired, depending on whether the item was dropped back where it was originally lifted from _(which is essentially a no-op that's treated as a `cancel` event)_.
Expand Down

0 comments on commit b604c08

Please sign in to comment.