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

Question

我正在使用 jQueryUI Sortable 构建一个 KanBan 样式板。这些板将用于保存来自数据库的订单记录。每个 bBoard/Column 都是订单记录当前所在的 "Status"。因此，随着订单在装配线上的进展，它可以被拖放到一个新的 board/column，然后它会生成一个AJAX 请求更新订单记录状态数据库列。

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

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

如果您单击取消，则它不会发出AJAX 请求。这意味着 ordr rcord 在技术上仍将保存在它之前的列中。然而，在 DOM 中，它将被丢弃在新位置。

我需要弄清楚如何在通过警告对话框取消拖放操作时让订单记录移回到它的前一列。

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

基本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');

                }
            }

点击取消按钮

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

这里有更多内容jQuery Sortable - cancel and revert not working as expected

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

Move a drag and dropped DIV back to it's previous location programatically using jQueryUI Sortable

javascript

jquery

jquery-ui

jquery-ui-sortable