使用jQueryUI Sortable以编程方式移动拖动并将DIV放回到之前的位置

Question

我正在使用jQueryUI Sortable来构建KanBan样式板。该板将用于从数据库中保存订单记录。每个bBoard / 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