使用 jQuery UI Sortable 以编程方式将拖放的 DIV 移回其先前位置

Question

我正在使用jQueryUI Sortable 构建KanBan 样式板。这些板将用于保存数据库中的订单记录。每个 bBoard/Column 是 Order 记录当前所在的“状态”。因此，当订单通过装配线进行时，可以将其拖放到新的 board/column 中，然后发出 AJAX 请求以更新订单记录状态数据库列。

这张图片应该有助于更好地解释......

将订单拖放到新列/板后，它会显示如下图所示的警报对话框。如果您接受它，它将发出 AJAX 请求以保存刚刚移动的此订单记录的新列/板。

如果您单击取消，则不会发出 AJAX 请求。这意味着从技术上讲，ordr rcord 仍将保存为它的上一列。不管在 DOM 中，它都会被放到它的新位置。

我需要弄清楚如何在通过警报对话框取消拖放时将订单记录移回上一列。

任何想法如何以编程方式将订单记录移动到它；以前的板/列？

基本的 JavaScript 代码...

$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    // Event fired when order cards has been moved to a new column
    $(".column").on("sortreceive", function(event, ui){

      var newStatusColumnName = $(this).data('status-name');

      // Show a confirmation Dialog.
      // Approve = AJAX save new column that order was moved to
      // Cancel = Do not save new value to database and move order
      // back to previous board/column

    });

});

---

此处演示 JSFidle 设置 http://jsfiddle.net/jasondavis/wv6fchmv/

Answer 1

试试

            'Cancel': {
                'class': 'gray',
                'action': function() {

                    // need to move the order card back to its previous status column somehow!
                   $(ui.sender).sortable('cancel');

                }
            }

点击取消按钮

更新了你的小提琴 http://jsfiddle.net/wv6fchmv/2/

更多jQuery Sortable - cancel and revert not working as expected