代码之家 › 专栏 › 技术社区 › Dan Beaulieu

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

drag draggable click jquery

0

Dan Beaulieu · 技术社区 · 11 年前

有没有办法将点击事件功能拖曳事件功能(如果有) 都附着到同一对象 ?

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

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

这可能吗?

这是我对以下代码的摆弄。。。

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,

});

2 回复 | 直到 11 年前

1

A. Wolff 11 年前

你可以使用 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-

2

1

Ozan 11 年前

您可以在单击事件开始时等待一段时间,然后仅当该元素未被拖动时才启动单击事件函数。

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/