Prevent click event after drag and drop in jQuery

Question

I have a draggable <div> with a click event and without any drag event.

but after dragging the <div> click event applies to the <div> .

how to prevent click event after drag and drop?

 $(function(){ $('div').bind('click', function(){ $(this).toggleClass('orange'); }); $('div').draggable(); }); 

http://jsfiddle.net/prince4prodigy/aG72R/

Answer 1

I made a decision with data and setTimeout . Maybe better than helper classes.

 <div id="dragbox"></div> 

and

 $(function(){ $('#dragbox').bind('click', function(){ if($(this).data('dragging')) return; $(this).toggleClass('orange'); }); $('#dragbox').draggable({ start: function(event, ui){ $(this).data('dragging', true); }, stop: function(event, ui){ setTimeout(function(){ $(event.target).data('dragging', false); }, 1); } }); }); 

Check the fiddle .

Answer 2

FIRST attach the drag event, THEN click event:

 $(function(){ $('div').draggable(); $('div').click(function(){ $(this).toggleClass('orange'); }); }); 

Try it here: http://jsfiddle.net/aG72R/55/

Answer 3

This should work:

 $(function(){ $('div').draggable({ start: function(event, ui) { $(this).addClass('noclick'); } }); $('div').click(function(event) { if ($(this).hasClass('noclick')) { $(this).removeClass('noclick'); } else { $(this).toggleClass('orange'); } }); }); 

Demo

Answer 4

With class ES6

To achieve this in javascript without the help of jQuery, you can add and remove an event handler.

First create functions that will be added and removed from event listeners

 flagged () { this.isScrolled = true; } 

and this is to stop all events in the event

 preventClick (event) { event.preventDefault(); event.stopImmediatePropagation(); } 

Then add the flag when the mousedown and mousemove fire one after another.

 element.addEventListener('mousedown', () => { element.addEventListener('mousemove', flagged); }); 

Do not forget to delete it with the mouse, so that we do not get a huge stack of events repeating in this element.

 element.addEventListener('mouseup', () => { element.removeEventListener('mousemove', flagged); }); 

Finally, inside the mouseup event of our element, we can use the flag logic to add and remove a click.

 element.addEventListener('mouseup', (e) => { if (this.isScrolled) { e.target.addEventListener('click', preventClick); } else { e.target.removeEventListener('click', preventClick); } this.isScrolled = false; element.removeEventListener('mousemove', flagged); }); 

In the above example, I aimed at the real target that I clicked on, so if it were a slider, I would target the image, not the main gallery element . to target the main element just change the add / remove event listeners like this.

 element.addEventListener('mouseup', (e) => { if (this.isScrolled) { element.addEventListener('click', preventClick); } else { element.removeEventListener('click', preventClick); } this.isScrolled = false; element.removeEventListener('mousemove', flagged); }); 

Conclusion

By setting anonymous functions to const, we do not need to bind them. Also in this way they have a "handle" that allows s to remove a specific function from the event instead of the entire set of functions in the event.

Answer 5

You can simply test the jQuery UI ui-draggable-dragging class on drag and drop. If it is there, do not continue the click event, otherwise, do it. The jQuery user interface handles setting up and removing this class, so you don't need to. :)

The code:

 $(function(){ $('div').bind('click', function(){ if( $(this).hasClass('ui-draggable-dragging') ) { return false; } $(this).toggleClass('orange'); }); $('div').draggable(); });