Prevent click event when drag with jquery gridster

Question

I am using gridster gridster.net for some draggable items. Those items are also clickable. When there is a click, it expands. But problem is that when I drag an item, it also fire a click event and the item expands after dropping. How can I prevent that?

Here is my jquery code example:

$(document).on('click touchend', '.gridster li.gs-closed p', function() {
    var clickedItem = $(this);
    var parent = clickedItem.parent('li');
    gridster.resize_widget(parent, 1,4);
    parent.removeClass('gs-closed').addClass('gs-opened');
});

$(document).on('dblclick touchend', '.gridster li.gs-opened p', function() {
    var clickedItem = $(this);
    var parent = clickedItem.parent('li');
    gridster.resize_widget(parent, 1, 1);
    parent.removeClass('gs-opened').addClass('gs-closed');
});

possible duplicate of [gridster ,do not invoke the click action for the div](http://stackoverflow.com/questions/14301026/gridster-do-not-invoke-the-click-action-for-the-div) — Alastair Maw, Aug 21 '14 at 16:55

Stephen85 · Answer 1 · 2020-04-16T23:34:44.060

The best solution I've found for this comes from Alastair Maw. Here is a link to the SO page where the solution comes from. How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

Sadly it was not selected as the preferred answer, but just scroll down to find it.

Here is the completed script block working for me, which takes Alastair's solution.

<script>
    function pageLoad() {

        var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); };

        $(".gridster ul").gridster({
            widget_margins: [10, 10],
            widget_base_dimensions: [140, 140], 

            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);
                    });
                }
            }
        });
    }
</script>

score 0 · Answer 2 · edited May 23 '17 at 12:28

Actually this worked for me:
Original answer: How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

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

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

Then

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

Prevent click event when drag with jquery gridster

2 Answers2