JQuery UI:在 Droppable Drop 时取消排序

Posted

技术标签:

【中文标题】JQuery UI:在 Droppable Drop 时取消排序【英文标题】:JQuery UI: Cancel Sortable upon Droppable Drop 【发布时间】:2011-12-11 15:53:43 【问题描述】:

我正在使用 JQuery 1.5.1 和 JQuery UI 1.8.11。

我为一些项目添加了可排序 - 这里的任务是允许拖动排序,这一切都很好。

但我也想合并 droppable,以便可以将项目拖放到“复制我”区域 - 那里的任务是复制项目(我稍后会解决这个问题)

问题是可放置的目标位于可排序列表的底部(我不想移动它),一旦放置,可排序的项目就会移动到列表的底部。

我想做的是在 drop 事件触发时取消这种排序。

You can see my problem in action here(只需将“Item 1”拖到“Drop to Copy Item”区域,您会看到排序不会被取消)

如您所见,我在可放置的“drop”事件中尝试了以下操作(来自 JQuery UI Docs 的建议),但它似乎不起作用...

$(this).sortable('cancel');

我也愿意接受任何其他关于如何实现我正在寻找的“拖放复制”效果的建议。

谢谢

【问题讨论】:

取消是什么意思?取消将停止排序并将您正在排序的内容留在您离开它的确切位置。 @jQuerybeast:是的,这就是我想要的,“取消”会将项目返回到原始空间。因此,在我的 JSFiddle 中,如果您尝试复制项目 1,则会发生复制,并且项目 1 应该恢复到顶部......此时它移动到底部,因为这是放置事件之前的最后一个突出显示位置 取消不适用于可排序但可拖动。在 sortable 中,您可以取消/停止整个功能。 @jQuerybeast:是的,我通过在原始容器 DIV 上尝试取消来做到这一点。这得到了恢复项目的效果,但它停止了排序工作。所以我想也许我可以取消然后重新添加可排序功能 - 但这似乎也不起作用(它不会重新添加)。有什么想法吗? @jQuerybeast:我已经设法解决我的问题并发布了我自己的答案。以防万一你有兴趣看看我是怎么做到的;) 【参考方案1】:

好的,所以我已经制定了一个可以完成这项工作的解决方案。

如果您在可排序函数的“停止”事件中使用取消代码,它确实有效。但是,它仅在“还原”完成后才适用。问题是我试图从可放置的“放置”事件中复制/还原元素,这还为时过早。

解决方案是等待“停止”事件完成,为此我必须创建一个“等待复制”标志,以便在“停止”事件中进行检查。

Here is an example

它仍然感觉不正确(UX 方面),但它工作正常,您始终可以在 sortable 函数上将 revert 设置为 false 以获得更好的感觉。

示例代码如下...

var itemCount = 3;
var awaitingCopy = false;

$(init);

function init() 
    $("#Items").sortable(
        revert: true,
        placeholder: "ItemPlaceHolder",
        opacity: 0.6,
        start: StartDrag,
        stop: StopDrag
    );

    $("#CopyItem").droppable(
        hoverClass: "CopyItemActive",
        drop: function(event, ui) 
            awaitingCopy = true;
        
    );

    $("#NewItem").click(function(e) 
        e.preventDefault();
        itemCount++;
        var element = $("<div class='Item'>Item " + itemCount + "</div>");
        $("#Items").append(element);
        element.hide().slideDown(500);
    );


function CopyItem(element) 
    awaitingCopy = false;
    var clone = element.clone();
    $("#Items").append(clone);
    clone.hide().slideDown(500);


function StartDrag() 
    $("#NewItem").hide();
    $("#CopyItem").show();


function StopDrag(event, ui) 
    if (awaitingCopy) 
        $(this).sortable('cancel');
        CopyItem($(ui.item));
    
    $("#NewItem").show();
    $("#CopyItem").hide();

无论如何,希望这会帮助其他想要同样效果的人......不过不要窃取我的设计;)

【讨论】:

这帮助我找到了解决方案,但我只想指出全局变量是不必要的——看起来你没有使用正确的 jQuery 选择器。而不是 $(this).sortable('cancel');,它应该是 $("#Items").sortable('cancel');

以上是关于JQuery UI:在 Droppable Drop 时取消排序的主要内容,如果未能解决你的问题,请参考以下文章

如何在 jQuery UI 中使用 Draggable 和 Droppable 将拖动的 li 添加到可放置的 ui 中?

JQuery UI:在 Droppable Drop 时取消排序

02 Jquery UI Droppable 放置插件

jQuery UI Droppable and Sortable - 放置在正确的排序位置

jQuery-UI - .append 从 .droppable 到 p.array (几乎就在那里!)

如何让 Jquery UI 的 Droppable 在其左上角进入内部时接受 Draggable? [关闭]