0

我正在使用 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');
});
4

2 回答 2

1

我为此找到的最佳解决方案来自 Alastair Maw。这是解决方案来源的 SO 页面的链接。 如何避免在拖动带有可点击内容的 gridster.js 小部件后触发点击事件？

遗憾的是，它没有被选为首选答案，但只需向下滚动即可找到它。

这是为我工作的完整脚本块，它采用了 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>
于 2020-04-16T23:24:48.210 回答
0

实际上这对我有用：
原始答案：如何避免在拖动带有可点击内容的 gridster.js 小部件后触发点击事件？

...
    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
....
于 2013-10-14T07:45:04.317 回答