添加的jQuery的DragDrop淘汰賽

可能重複：
Sortable and droppable knockout list 添加的jQuery的DragDrop淘汰賽

我使用淘汰賽綁定一個UL。我想讓用戶能夠拖放一個LI和我的viewmodel以重新排序更新。

拖放工作，我有正確的事件在我的jQuery中工作，但我不知道如何進行更新。

我曾圍繞文檔尋找，但找不到任何東西。

我創建了一個小提琴做出解釋我在做什麼更容易一些

Js Fiddle here

任何建議將是真棒！

更新了的jsfiddle鏈接

來源

2012-08-10 Diver Dan

某事在tha t小提琴應該是可拖動的？ – JMM 2012-08-11 01:27:55

嘿@JMM是你的權利。我修復了鏈接 – 2012-08-11 08:40:11

只是FYI ...你可以像這樣重寫toJSON（關於Knockout 2.1的新功能）self.lastSavedJson（ko.toJSON（self.questions，null，2））; – 2012-08-11 14:47:40

我從來沒有與淘汰賽工作，我沒有時間去了解它的複雜性，現在，所以這不是一個完整的解決方案，但here's something to get you started。請參閱下面的鏈接，瞭解我在搜索時發現的某些頁面可能會幫助您完成解決方案。

這是我從你original fiddle改變的部分：

var view_model = new ViewModel(initialData); 

ko.applyBindings(view_model); 

$(function() { 
    $("#sortable").sortable({ 
     revert: true, 
     stop: function(event, ui) { console.log("stop event")}, 


     start : function (event, ui) { 

      ui.item.data('previous_index', ui.item.index()); 

     }, 
     // start 


     update : function (event, ui) { 

      var question = view_model.questions.splice(

       ui.item.data('previous_index'), 1 

      )[0]; 

      view_model.questions.splice(ui.item.index(), 0, question); 

      ui.item.removeData('previous_index'); 

     } 
     // update 

    }); 
});

參考文獻：

jQuery UI Sortable, how to determine current location and new location in update event?

get the start position of an item using the jquery ui sortable plugin

jQuery Sortable() with original position placeholder?

knockout + jqueryui draggable/droppable follow-up

來源

2012-08-11 13:50:43 JMM