Confirm jQuery Sortable nhận sự kiện

Question

Tôi có hai danh sách ul riêng biệt: list-A và list-B

cả trong số đó là sắp xếp được nhờ vào các plugin jQuery UI.

Người dùng dự án tôi đang làm việc muốn xác nhận hành động khi các mục được chuyển từ danh sách này sang danh sách khác, nhưng không phải khi di chuyển trong cùng một danh sách. Khi một hành động được kích hoạt, trang sẽ khởi chạy một yêu cầu Ajax tới máy chủ để cập nhật vị trí của (các) danh sách.

Điều khiến tôi lo lắng là thứ tự của các sự kiện. Kinh nghiệm của tôi cho đến nay là sự kiện cập nhật được kích hoạt trước khi sự kiện nhận được như vậy trước khi hộp thoại xác nhận được hiển thị, một yêu cầu đã được bắt đầu. Không may là tôi quên danh sách nào kích hoạt yêu cầu nhưng trong trường hợp của tôi nó không quan trọng: nếu một mục được kéo vào một danh sách khác, sẽ không có gì được gửi đến máy chủ cho đến khi người dùng xác nhận hành động.

Tôi đã sử dụng jQuery khá một chút nhưng tôi nghĩ rằng tôi có thể sử dụng một số trợ giúp về vấn đề này.

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(); 

Markup:

<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> 

Cập nhật:

Kịch bản I) dùng kéo A1 đến A3 - kết quả là không có xác nhận hộp thoại để một yêu cầu được gửi đến e server để thứ tự sắp xếp mới được duy trì.

Kịch bản II) dùng kéo A1 đến B3 (hoặc B3 để A1) - Kết quả là một hộp thoại xác nhận và sau đó, chỉ khi hộp thoại được chấp nhận, một yêu cầu được gửi đến máy chủ. Đây là nơi tôi đã giải quyết với hai yêu cầu như tôi đã mô tả trong một trong những nhận xét của tôi.

Answer 1

Bạn không cần phương pháp update sau đó, chỉ cần xóa nó! Example link.