Preventing click event with jQuery drag and drop

by

A solution that worked well for me and that doesn’t require a timeout: (yes I’m a bit pedantic 😉

I add a marker class to the element when dragging starts, e.g. ‘noclick’. When the element is dropped, the click event is triggered — more precisely if dragging ends, actually it doesn’t have to be dropped onto a valid target. In the click handler, I remove the marker class if present, otherwise the click is handled normally.

$('your selector').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('your selector').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        // actual click event code
    }
});

More Related Contents:

  1. Drop event not firing in chrome
  2. Getting the position of the element in a list when it’s drag/dropped (ui.sortable)
  3. Dealing with overlapping jQuery sortable lists
  4. How do I attach events to dynamic HTML elements with jQuery? [duplicate]
  5. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  6. How to set file input value when dropping file on page? [duplicate]
  7. Detecting Browser Autofill
  8. Firing event on DOM attribute change
  9. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  10. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  11. How can I listen for a click-and-hold in jQuery?
  12. prevent Scroll bubbling from element to window
  13. Get index of clicked element in collection with jQuery
  14. How to stop default link click behavior with jQuery
  15. Listening for Youtube Event in JavaScript or jQuery
  16. Throttle event calls in jQuery
  17. JavaScript: DOM load events, execution sequence, and $(document).ready()
  18. jQuery live scroll event on mobile (work around)
  19. How can I get jQuery .val() AFTER keypress event?
  20. How to know if .keyup() is a character key (jQuery)
  21. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  22. Event propagation in Javascript
  23. jQuery – How can I temporarily disable the onclick event listener after the event has been fired?
  24. How to disable mouseout events triggered by child elements?
  25. jquery/javascript: function(e){…. what is e? why is it needed? what does it actually do/accomplish?
  26. Prototype equivalent for jQuery live function
  27. html5 drag and drop FOR MOBILE [duplicate]
  28. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  29. Fire oninput event with jQuery
  30. addEventListener to iFrame

Leave a Comment