How to cancel dranNdrop programmatically
frkn-aydn opened this issue · comments
i want to cancel the dragndrop after some event occurs is it possible to clean effect untill recalling the function
Update: see #2 (comment)
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.
it could be so nice to have a teardown method anyway :)
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… :)
well in this case you could return kinda descriptor while initing the dragNdrop then teardown could take this descriptor as a parameter (c approach )
this descriptor could be something like the event object you use
Sounds good, if you feel confident to master this a pull request is very welcome
okay today ill try to pr :)
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)
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 …