Knockoutjs和JQuery的可拖動div

我有一個可觀察的數組，我添加或刪除元素。元素顯示爲DIV。我想使每個DIV可拖動，但是因爲DIV是在飛行中創建的，所以我不確定如何執行此操作。我正在考慮使用JQuery live（）函數，但我需要傳遞和操作，所以我不認爲這是正確的方法。Knockoutjs和JQuery的可拖動div

這是我的代碼：淘汰賽：

function AssetViewModel() { 


var self = this; 

self.assets = ko.observableArray([]); 

self.addAsset = function(){ 
    self.assets.push(
     { 
      id: "1", 
      content: "Hello World", 
      type: "Asset" 
     } 
    ); 
} 
self.removeAsset = function(asset){ 
    self.assets.remove(asset); 
    }; 
};

HTML：

<div id="layer1" data-bind="foreach: assets"> 
<div data-bind="text: content" class="asset"></div> 

</div>

任何建議，將不勝感激！

來源

2013-09-10 Ronny vdb

這是custom bindings的工作。要點是你創建一個這樣自己的綁定，所以你看起來標記：

<div data-bind="foreach: assets"> 
    <div data-bind="draggable: $data"> 
     <p>More markup</p> 
    </div> 
</div>

自定義綁定將是：

ko.bindingHandlers.draggable = { 
    init: function (element, valueAccessor, allBindingsAccessor, vieModel, bindingContext){ 
     $(element).draggable(); 
     return ko.bindingHandlers.with.init.apply(this, arguments); 
    } 
};

你並不需要通過調用with結合的init返回任何東西，但函數，你創建一個包裝器綁定來執行你的邏輯，並且像你要返回的綁定一樣行事。學習自定義綁定時，它通常是一個很好的開始。

來源

2013-09-10 22:04:25 nwayve

工作就像一個魅力！但是我必須做出一個改變，它不應該是一個功能。 –

你是對的！不知道我是如何錯過的，很好。我更新了答案。很高興它對你有效。 – nwayve

嘗試閱讀下一篇文章 - Revisiting Dragging, Dropping, and Sorting observableArrays 它包含詳細的說明和樣本數量。

來源

2013-09-10 21:31:20 RredCat

我不確定是否只是想在layer1 div中添加排序（或者在其他dom元素之間拖放）。無論您想要什麼，我都會使用Knockout-Sortable插件（https://github.com/rniemeyer/knockout-sortable）。

它爲我工作在一個複雜的排序，拖放溶液淘汰賽（命名模板嵌套多層。）

檢查在該頁面底部的JSFiddles上手。

希望有所幫助。

來源

2013-09-10 22:08:07

Knockoutjs和JQuery的可拖動div

回答

相關問題