确认jQuery的排序接收事件

我有两个独立的无序列表：列表A和列表-B确认jQuery的排序接收事件

两者都是排序感谢jQuery UI的插件。

我正在处理的项目的用户希望确认将项目从一个列表移动到另一个列表时的操作，但在相同列表中移动时，要求而不是。当一个动作被触发时，该页面将启动一个Ajax请求到服务器来更新列表的位置。

令人不安的是事件的顺序。目前我的经验是，更新事件在接收事件之前触发，所以在显示确认对话框之前，请求已经启动。

不幸的是，我忘记了哪个列表触发了请求，但在我的情况下它确实没有关系：如果某个项目被拖动到另一个列表中，则在用户确认该操作之前，不应将任何内容发送到服务器。

我已经使用jQuery相当多，但我想我可以在这个上使用一些帮助。

的Javascript：

$('.sortable').sortable({ 
    start: function (event, ui) { 
     $(ui.helper).addClass("sortable-drag-clone"); 
    }, 
    stop: function (event, ui) { 
     $(ui.helper).removeClass("sortable-drag-clone"); 
    }, 
    update: function (event, ui) { 

     if ($(ui.sender).length == 0) { 
      alert("item was moved within the same list."); 
      //Make request 
     } else { 
      //do nothing. 
     } 
    }, 
    receive: function (event, ui) { 
     if (confirm("show move or copy dialog, from {0} to {1}")) { 
      //do request 
     } else { 
      $(ui.sender).sortable("cancel"); 
      //no request 
     } 
    }, 
    tolerance: "pointer", 
    connectWith: ".sortable", 
    placeholder: "sortable-draggable-placeholder", 
    forcePlaceholderSize: true, 
    appendTo: 'body', 
    helper: 'clone', 
    zIndex: 666 
}).disableSelection();

标记：

<div id="list-A"> 
    <ul class="sortable"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div> 
<div id="list-B"> 
    <ul class="sortable"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div>

更新：

方案I） 用户拖动A1至A3 - 结果是没有确认对话框，以便一个请求被发送给th e服务器，以便保持新的排序顺序。

方案II） 用户拖动A1至B3（B3或到A1） - 结果是确认对话框，然后，仅当该对话框被接受，一个请求被发送到服务器。这是我在两次请求中解决的地方，正如我在其中一条评论中所述。

来源

2011-01-26 Adam Asham

你不需要update方法然后，只是删除它！ Example link。

来源

2011-01-26 09:29:40 ifaour

几乎在那里，但不完全。它不会在同一个列表中找到可排序的事件。但是，我确实通过设置数据属性（“doConfirm”，true）并在停止事件处理程序中重置它来实现它。我会看看我能否找到代码。它并不完美：它导致两个请求被发送到服务器（一个用于列表A，另一个用于列表B）。理想情况下，我希望自己汇总项目并启动一个请求。 – 2011-01-29 12:36:13

确认jQuery的排序接收事件

回答

相关问题