将单击与 JQuery 中的可拖动功能分开

Question

如果点击事件功能与拖动事件功能都附加到同一个对象，有没有办法将它们分开？

我正在添加一个点击类。我的应用程序的目标是，当用户“点击”和项目时，它的可拖动功能被禁用。

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

这可能吗？

这是我对以下代码的小提琴...

jsFiddle

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

您可以使用可拖动元素的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,

});

-jsFiddle-

Answer 2

您可以在点击事件开始时稍等片刻，然后仅在该元素未被拖动时触发点击事件功能。

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

小提琴：http://jsfiddle.net/doqpbuvy/3/