Question

我正在使用gridster gridster.net来处理一些可拖动的项目。这些项目也是可点击的。点击时，它会展开。但问题是，当我拖动一个项目时，它也会触发一个单击事件，并且项目在删除后会展开。我该如何防止这种情况？

这是我的jquery代码示例：

$(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');
});

Answer 1

为此我找到的最佳解决方案来自Alastair Maw。这是解决方案来源的SO页面的链接。 How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

可悲的是，它没有被选为首选答案，而是向下滚动以查找它。

这是为我工作的完整脚本块，它采用了Alastair的解决方案。

<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>

Answer 2

实际上这对我有用：
原始答案：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
        }
    }
....

然后

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

使用jquery gridster拖动时阻止单击事件

2 个答案: