在 JQuery 中将点击与可拖动功能分开

Question

有没有办法将 click 事件功能与 drag 事件功能分开，如果它们 都附加到同一个对象?

我在单击时添加 class。我的应用程序目标是当用户拥有 'clicked' 和项目时，它的可拖动功能被禁用。

相反，如果用户拖动某个项目，则不应触发点击。

这可能吗？

这是我的 fiddle，包含以下代码...

html:

<div class="buttonBox"></div>

jQuery:

var bool = false;
var buttonBox = $(".buttonBox");

buttonBox.off("click");
buttonBox.on("click", function (event, ui) {
    console.log("class Added");
    $bool = true;
    var self = $(this);
    self.addClass("selectedBox");
});

buttonBox.draggable({
    distance: 40,
    disabled: bool,
    revert: "invalid",
    revertDuration: 400,
    refreshPositions: true,

});

Answer 1

您可以在点击事件开始时稍等片刻，只有在该元素未被拖动时才触发点击事件函数。

buttonBox.on("click", function (event, ui) {
    setTimeout(function (ev, ui) {
        if($(ev.target).hasClass("ui-draggable-dragging"))
            return;
        console.log("class Added");
        $(ev.target).addClass("selectedBox");
    }, 50, event, ui);
});

Fiddle: http://jsfiddle.net/doqpbuvy/3/

Answer 2

您可以使用可拖动元素的 start 事件来设置您的逻辑：

buttonBox.on("click", function (event, ui) {
    if($(this).hasClass('dragging')) {
        $(this).removeClass('dragging');
        return;
    }
    console.log("class Added");
    $bool = true;
    var self = $(this);
    self.addClass("selectedBox");
});

buttonBox.draggable({
    start: function(){
        if($(this).hasClass('selectedBox')) return false;
        $(this).addClass('dragging');
    },
    distance: 40,
    disabled: bool,
    revert: "invalid",
    revertDuration: 400,
    refreshPositions: true,

});

在 JQuery 中将点击与可拖动功能分开

Separating click from draggable functionality in JQuery

jquery

click

draggable

drag

-jsFiddle-