Cannot have both drag and toggle actions on the same grid

[Jivings]

I need both to be able to drag items about, and listen to click events on them.

This appears to be impossible without some hackery.

[nix23]

If you want just listen for click events for some custom logic you should use mousedown/touchstart events instead of click events. (Item clone will be created on drag start, then original item will be hidden with 'visibility: hidden' rule, so click event will never fire on original item),

Alternatively, if you want to have both drags/sizes transforms(toggleCss) on same grid item, you have 2 options here:

1. Create separate control element(drag handler or toggler) on your item and split functions: click(touch) on item will be used for drags or toggles, click(touch) on separate control will be used for second function(Drag or toggle).

<div class="grid">
    <div class="grid-item"><div class="dragHandlerOrToggler"></div></div>
    ...
</div>

2. Fire toggleCss fn if action is not recognized as drag:

// Notice: Example with jQuery events. You can use any another lib.
// (This is a simplified example - don't forget to add touchstart/touchend events support in real app.)
var startCoords = {x: null, y: null};
var $item = null;

$(".grid").on("mousedown", function(ev) {
   // Remember initial coords
   startCoords.x = ev.pageX;
   startCoords.y = ev.pageY;
   $item = $(this);
});

$("body").on("mouseup", function(ev) {
   if($target == null) return;

   // Calc diff between initial coords and coords on item release.
   var xDiff = Math.abs(ev.pageX - startCoords.x);
   var yDiff = Math.abs(ev.pageY - startCoords.y);
   // toggleCss will fire always without some threshold value.
   // (It shouldn't fire on drags)
   var recognizeAsToggle = 10;
   if(xDiff < recognizeAsToggle && yDiff < recognizeAsToggle) {
       // setTimeout is required here because Gridifier should finish drag before toggle operation start;
       // (Probably will be moved to core in next versions)
       setTimeout(function() { grid.toggleCss($target, /* New classes */); }, 0);
   }
});