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

Question

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

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

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

如果您单击取消，则不会发出 AJAX 请求。这意味着 orderr 记录在技术上仍将保存在其上一列下。但是在 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

    });

});

---

此处演示 JSFiddle 设置 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');

                }
            }

点击取消按钮

更新了你的 fiddle http://jsfiddle.net/wv6fchmv/2/

更多信息请点击 jQuery Sortable - cancel and revert not working as expected