Question

根据the jQuery UI API Documentation，＆＃34;距离＆＃34;和＆＃34;延迟＆＃34;自1.12版起，不推荐使用这些选项。具体来说：

（＃10615）交互应该是即时的。这些设置通常用于防止意外拖拽，但正确的解决方法是改善用户体验，例如使用手柄以避免意外拖拽。

我正在使用jQuery UI开发RPG地图构建器。用户可以将切片从选择区域拖动到网格以放置它们，或者他们可以单击切片将其设置为＆＃34;活动＆＃34; tile，然后单击网格中的tile将它们转换为＆＃34; active＆＃34;的副本。瓦。我遇到的问题是在设置磁贴上单击并轻微拖动将导致磁贴被删除。我觉得使用一个手柄拖动已经在地图上的瓷砖会降低用户体验，因为它们必须将指针设置为比瓷砖更小的区域。

所以我的问题是：我可以用什么代替这些功能？是否最好留在旧版本的jQuery UI？编写代码来模仿这个功能会更好吗？应该我对网格上已有的项目使用句柄吗？

我想我可以检查是否（拖动的元素（ui.draggable）与放置目标（event.target）相同，但是我在提供逻辑时遇到了麻烦。

我的代码位于https://codepen.io/Qumez/pen/OzvbdV。相关函数有setDraggableTiles（）和setDroppableTiles（），如下：

function setDroppableTiles() {
    $("#grid .tile").droppable({
        accept: ".tile",
        drop: function(event, ui) {
            drop(event,ui);
        }
    });
}

function setDraggableTiles() {
    $(".tile").not("#grid .placeholder").draggable({
        revert: false,
        helper: "clone",
        stop: function(event, ui) {
            var $ele = $(event.target);
            console.log($ele);
            console.log($(ui.draggable));
            if ($ele.hasClass("tile-set")) {
                $ele
                    .removeClass()
                    .addClass("placeholder tile");
            }
        }
    });

    $("#grid .tile").not(".placeholder").addClass("tile-set");
}

提前致谢！

jQuery UI替换＆＃34;距离＆＃34;和＃34;延迟＆＃34;选项

0 个答案: