How to cancel dranNdrop programmatically

[frkn-aydn]

i want to cancel the dragndrop after some event occurs is it possible to clean effect untill recalling the function

[ThibaultJanBeyer]

Update: see https://github.com/ThibaultJanBeyer/dragNdrop/issues/2#issuecomment-276004195

Hi @turkishdeveloper and thanks for using the plugin! Yup, for the moment you can dispatch a custom mouseup event like so:

var eventing = new Event('mouseup');
document.dispatchEvent(eventing);

This will cancel the drag and work in all browsers newer than IE9. If you want to support IE9, write it like this:

var eventing;
if(typeof Event === 'function') {
  eventing = new Event('mouseup');
  document.dispatchEvent(eventing);
} else {
  //fallback for IE9 is document.createEvent. But for IE8 and below that does not work either.
  if(document.createEvent) {
    eventing = document.createEvent('CustomEvent');
    eventing.initEvent('mouseup', true, true);
    document.dispatchEvent(eventing);
  }
}

Unfortunately this does not work for browsers older or equal to IE8.

I’m currently working on an easier solution (that also supports legacy browsers below IE8). As it needs a rewrite it will only be available in the next major release.

[ta3pks]

it could be so nice to have a teardown method anyway :)

[ThibaultJanBeyer]

Yes sure. Right now the plugin has a strictly functional approach. Unless you have a better idea, I think that it needs a more object oriented approach with methods attached bounds to it. This is what I want to achieve for the 1.2 release… :)

[ta3pks]

well in this case you could return kinda descriptor while initing the dragNdrop then teardown could take this descriptor as a parameter (c approach )

[ta3pks]

this descriptor could be something like the event object you use

[ThibaultJanBeyer]

Sounds good, if you feel confident to master this a pull request is very welcome

[ta3pks]

okay today ill try to pr :)

[frkn-aydn]

My problem is still there. Unfortunately, it does not work.

function dragMouseDown(e) { window.dragTimer = null; window.dragTimer = setTimeout(function () { dragNdrop({ element: document.getElementById('sidebar_allaccount'), constraints: "y" }); }, 100) }

function dragMouseUp(e){ window.dragTimer = null; var eventing = new Event('mouseup'); document.dispatchEvent(eventing); document.querySelector("#sidebar_allaccount").removeEventListener("mousedown", dragMouseDown); } document.querySelector("#sidebar_allaccount").addEventListener("mousedown", dragMouseDown, false) document.querySelector("#sidebar_allaccount").addEventListener("mouseup", dragMouseUp, false)

[ThibaultJanBeyer]

Ah okay @turkishdeveloper, I now understood what you want to do. OK. Here is how you can do that now in version 1.2.0:

1. Get the latest version of the DragNDrop plugin

here on github: https://github.com/ThibaultJanBeyer/dragNdrop

2. You can now save the function to a variable to get full access over it

Since the function now returns a control object. I also added .start(), .pause() and .stop() functionalities:

var dnd = dragNdrop({ element: document.getElementById('element') });

// you can now use start(), pause(), stop(), etc. like so:
dnd.pause()  // will stop the current dragging process
dnd.stop();  // will teardown/stop the whole functionality
dnd.start();  // reset the functionality after a teardown

So what you want to do is, I think, using the .stop() method. Something like this I guess:
Rough & fast pseudocode, using your code:

var dnd;

function dragMouseDown(e) {
  window.dragTimer = null;
  window.dragTimer = setTimeout(function () {
    dnd = dragNdrop({
      element: document.getElementById('sidebar_allaccount'),
      constraints: "y"
    });
  }, 100)
}

function dragMouseUp(e){
  window.dragTimer = null;
  if(dnd) dnd.stop();
  document.querySelector("#sidebar_allaccount").removeEventListener("mousedown", dragMouseDown);
}

document.querySelector("#sidebar_allaccount").addEventListener("mousedown", dragMouseDown, false)
document.querySelector("#sidebar_allaccount").addEventListener("mouseup", dragMouseUp, false)

3. Please let me know if everything worked as expected

If not, I’ll be happy to support.

__ @NikosEfthias thanks a lot for contributing and I hope you did not put yourself too much into it yet. Sorry my bad, I didn’t understand it at first :S …