Knockoutjs и Jquery draggable div

У меня есть наблюдаемый массив, к которому я добавляю или удаляю элементы. Элементы отображаются как DIV. Я хочу сделать каждый DIV перетаскиваемый, однако, поскольку DIV создается на лету, я не знаю, как это сделать. Я думал об использовании функции JQuery live(), но мне нужно пройти и действовать, поэтому я не думаю, что это будет правильный подход.

Это мой код: Нокаут:

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:

Любые предложения будут ценны!

3 ответа

Это задание для пользовательских привязок. Суть в том, что вы создаете свою собственную привязку, чтобы разметка выглядела так:

<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 привязкой, вы создаете привязку обертки, которая выполняет вашу логику и действует как привязка, которую вы возвращаете. Обычно это хорошее место для начала обучения пользовательских привязок.


Я не уверен, что вы просто хотите добавить сортировку в свой layer1 div (или перетаскивание между другими элементами dom). Независимо от того, что вы хотите, я бы использовал плагин Knockout-Sortable (https://github.com/rniemeyer/knockout-sortable).

Он работал для меня в сложном виде, перетаскивая решение с помощью Knockout (называемые шаблонами вложенные несколько слоев).

Чтобы начать, проверьте JSFiddles внизу этой страницы.

Надеюсь, это поможет.


Попытайтесь прочитать следующую статью - Повторное перетаскивание, перетаскивание и сортировка наблюдаемых массивов. Оно содержит подробное объяснение и количество выборок.

licensed under cc by-sa 3.0 with attribution.