How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

Question

I\'m using Gridster (http://gridster.net/) which able to drag the content inside the li . In my li there is a clickable div.

Answer 1

The problem is that the click event is fired after the mouseup event that is passed to draggable.stop.

You therefore need to briefly trap that click event and stop it propagating, then untrap it once you've finished so people can subsequently click on the item.

You can do this like so (click for working JSFiddle):

$(document).ready(function () {
  // Basic event handler to prevent event propagation and clicks
  var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); };
  $(element).gridster({
    draggable: {
      start: function (event, ui) {
        // Stop event from propagating down the tree on the capture phase
        ui.$player[0].addEventListener('click', preventClick, true);
      },
      stop: function (event, ui) {
        var player = ui.$player;
        setTimeout(function () {
          player[0].removeEventListener('click', preventClick, true);
        });
      }
    }
  });
})

This is a much better solution than the currently accepted answer, because it avoids having a variable with state being set/checked across multiple components/handlers.

Answer 2

you should try that :

var gridster = $(".gridster ul").gridster().data('gridster');
gridster.disable();

Answer 3

Without digging into the JS, adding onclick = "return false;" to your <a> tag should stop the click from triggering.

For stopping just the drag, try:

gridster.draggable.stop(){
   return false;
}

or

gridster.draggable.stop(e){
   e.preventDefault();
}

Answer 4

I fixed it with a trigger variable: var dragged = 0 Add the following to your gridster initialization which sets the variable to 1 on drag start:

...
    draggable: {
        start: function(event, ui) {

            dragged = 1;
            // DO SEOMETHING
        }
    }
....

In your click event on the same object, check:

...
    if(!dragged){
        // DO SOMETHING
    }
    // RESET DRAGGED SINCE CLICK EVENT IS FIRED AFTER drag stop
dragged = 0
....

Answer 5

There now is a native support to disable the drag and drop operation on Gridster.

$(".gridster ul").gridster().data('gridster').disable();