只允许一个可放置区域 jquery 拖放

Only allowing one droppable area jquery drag and drop

本文关键字:区域 jquery 拖放 许一个      更新时间:2023-09-26

我有jquery拖放工作,所以我可以将表中的一行移动到另一行。

演示在这里:http://www.aussiehaulage.com.au/Default.aspx

我使用 jquery-ui-1.8.22 使我的表可拖动/可拖放。

我的JavaScript是:

 $(document).ready(function () {
        $(".draggable").draggable({
            helper: function () { return "<div class='ghost'></div>"; },
            start: resizeGhost,
            revert: 'invalid'
        });
        $(".droppable").droppable({
            hoverClass: 'active',
            drop: function (event, ui) {
                var target = $(event.target);
                var draggable = ui.draggable;
                draggable.insertBefore(target);
            },
            tolerance: 'touch'

        });

    });

但是,当我移动该行时,如果鼠标光标位于可放置表上的 2 行之间,则会突出显示两个可放置行。我需要这样做,以便它一次只突出显示 1 个可放置的行..

这可能吗?

在可放置元素中添加一个新选项,使用公差拟合或相交

   $(".droppable").droppable({
        hoverClass: 'active',
        tolerence: 'intersect',
        drop: function (event, ui) {
            var target = $(event.target);
            var draggable = ui.draggable;
            draggable.insertBefore(target);
        },
        tolerance: 'touch'
    });

并供您参考:jquery-ui