Question

是否可以将点击事件功能与拖动事件功能分开，如果它们都附加到同一个对象？< / p>

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

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

这可能吗？

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

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

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

Answer 2

您可以使用draggable元素的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中的可拖动功能分开

2 个答案:

-jsFiddle-