使用jQueryUI以編程方式將拖放DIV移回到之前的位置可排序

我使用jQueryUI Sortable來構建KanBan樣式板。該板將用於從數據庫中保存訂單記錄。每個bBoard/Column是訂單記錄當前所處的「狀態」。因此，當訂單在裝配線上前進時，可將其拖放到新的板/列，然後發出AJAX請求更新訂單記錄狀態數據庫列。使用jQueryUI以編程方式將拖放DIV移回到之前的位置可排序

該圖像將有助於更好地解釋......

enter image description here

後您拖放以新列/板它顯示一個如下這種圖像的警告對話框。如果您接受它，則會發出AJAX請求以保存剛剛移動的此訂單記錄的新列/板。

如果您點擊取消那麼它不會發出AJAX請求。這意味着ordr rcord在技術上仍然會被保存爲它的前一列。 HOwever在DOM中將被放置在它的新位置。

我需要弄清楚如何讓訂單記錄移回到上一列，當通過警報對話框取消拖放時。

任何想法如何以編程方式將訂單記錄移動到它;以前的董事會/專欄？

enter image description here

基本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/

來源

2015-06-20 JasonDavis

查看類似的問題http://stackoverflow.com/questions/2661514/jquery-ui-sortable-restore-position基於一些條件 – Amitd

嘗試

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

來源

2015-06-20 18:01:09 Amitd

謝謝我剛剛得到它的工作也在這裏用不同的方法http://jsfiddle.net/jasondavis/wv6fchmv/3/但是我需要得到新的下降列的價值現在在我的例子中被破壞了。我會檢查你現在的解決方案以及謝謝 – JasonDavis

偉大的你的解決方案使用我現有的代碼，所以我有新的價值列還是謝謝這將工作很好 – JasonDavis

yw..no probs :) – Amitd

使用jQueryUI以編程方式將拖放DIV移回到之前的位置可排序

回答

相關問題