How to trigger drag after a delay - on touch and hold for x ms?

[kennethlynne]

I need to be able to disable drag and only enable it when the user holds an item for x ms. What is the best way to achieve this?

[kennethlynne]

The proposed solution on bevacqua/angularjs-dragula#15:

var heldForThreeSeconds = 3000
var itemWasClicked
document.body.addEventListener('mousedown', function () {
  itemWasClicked = new Date()
})
dragula({
  moves: function () {
    return new Date() - itemWasClicked > heldForThreeSeconds
  }
}

does not work, as the moves callback is only called initially.

[bevacqua]

Added an API endpoint lift that resolves your UC, but you'll need to do some work on your end. The below piece of code is very rough but it does work.

var drake = dragula(containers, {
  moves: function () {
    if (lifted) {
      lifted = false;
      return true;
    }
  }
});
document.body.addEventListener('mousedown', function (e) {
  setTimeout(function () {
    lifted = true;
    drake.lift(e.target);
  }, 3000)
})

• drake.lift still checks if the item moves(), so you'll need to work around that
• drake.lift won't work if an element is already being dragged, so you'll have to end drags before calling lift.

[bevacqua]

@kennethlynne please give the PR branch a try and let me know whether it works as you'd expect.

[kennethlynne]

Awesome, thanks! It is on my todo, I will probably not look into it before next week. We worked our way around the problem, but this will be a nice improvement.

[bevacqua]

Use Slack for support requests. See #248.