可拖动和排序，停止和更新事件答案

【问题标题】：Draggable and sortable, stop and update events可拖动和排序，停止和更新事件
【发布时间】：2013-12-09 22:56:02
【问题描述】：

我正在使用来自 Jquery UI 的可拖动类和可排序类。我的 Draggable 与我的 sortable 连接，我需要从我的 draggable 容器转移到我的 sortable 容器。

在我的可拖动容器中，我有 2 个不同的项目，假设它是一篇文章和一本书，我的可分类容器是书架。这就是我想要做的：当一本书被拖进书架时，它被添加到那里；但是如果将一篇文章拖到书架上，则会在该文章中创建一本书，然后将其添加到书中。这是因为书架上只允许放书。

我已经能够在 javascript 中使用简单的 if/else if 来识别哪些函数启动了哪些函数，并且我将它附加到了可拖动容器中的我的停止事件。到这里为止一切正常。问题是停止事件没有检测到它何时被放置在可排序容器中，所以如果我在屏幕上移动它并在其他地方释放鼠标按钮，停止事件仍然会执行并继续执行它时应该发生的事情在实际容器上。

我也尝试将这些函数放在可排序容器的更新事件中，但是当我这样做时，由于某种原因，这些步骤不会执行，即使它在视觉上将其放置在可排序容器上，它也不会保存，或执行其余的实际功能。

更新：

$(".draggableUnselected").draggable({

    cursor: 'pointer',
    connectToSortable: "##bookShelf",
    helper: "clone",
    revert: "invalid",
    stop: function( event, ui ) {
        if($(this).attr("itemType")=="Book")
            {updateSelectedBooks();}
        else if($(this).attr("itemType")=="article")
            {
            $.ajax({
                url : "/com/Book.cfc",
                data : { method: 'quickAddBook', organizationid: #iterator.organizationid()#, profileid: #url.id#, name: "New Book "+$(this).attr("articleName") },
                error : statusAjaxError,
                dataType : "text",
                cache: false
            });
            updateSelectedBooks();
            }
        }

});

var $selectedBooks = $("##selectedBooks");

        $selectedBooks .sortable({
            revert: true,
            placeholder: "bookShelfTarget",
            connectWith: "##recycling"//,
           // update: //I copy the code from stop here for debugging
        });

【问题讨论】：

你能在演示中加入一个小提琴吗？
我更新了我的问题中的一些代码，我现在不能包含小提琴。额外的 # 符号是由于与 Coldfusion 的集成。
没有小提琴或 HTML 代码很难帮助你：/

标签： jquery draggable jquery-ui-sortable

【解决方案1】：

我在做了一些研究后解决了这个问题，答案实际上是在还原中使用我的代码而不是停止或更新。使用另一个 if 来识别对象是否从容器中释放出来。

还原：函数（socketObj）

            {
                if (socketObj) 
                {
                   //code goes here
                }
             return !socketObj;
            }

【讨论】：