Нокаут сортируемого перетаскивания снаружи

может быть, кто-то может мне помочь.
Я получил большое представление в веб-приложении. Слева есть список товаров, а справа список категорий. Товары следует перетаскивать внутри категорий.
Список продуктов был наблюдаемым массивом. Теперь у нас есть проблемы с производительностью (особенно в IE), когда список содержит более 1000 записей. Так как сами продукты не меняются, мы убрали их из привязки нокаута, объединили их в строку и добавили только один узел. Теперь, конечно, нокаутируемая сортируемая привязка больше не работает...

Это шаблон для категорий:

<div data-bind="sortable: {data: Products, beforeMove: $root.verifyProducts}, attr: { 'data-max': MaxProducts }">
<div class="menuEditTab2CatDragItem clearfix" data-bind="attr: { 'data-prodid': Id }">
    <div class="menuEditTab3ProdsNameText" data-bind="text: Name"></div>
    <div class="pull-right" style="margin-left:8px;"><i style="margin-top:-4px;" class="icon-remove" data-bind="click: $parent.removeProduct"></i>

    </div>
    <div class="pull-left menuEditTab3ProdsIdText">ID: <span data-bind="text: Id"></span>
    </div>
</div>

And here is the js code for the products list on the left side:

function fillAllProductsTab() {
        var parts = '';
        allProducts.forEach(function (item) {
            parts += '<div id="f_all_' + item.Id + '" >' +  // draggable="{data: $data, options:{containment: \'\#menuEditTab3Ce\', revert: \'invalid\'}}"
                '<div class="menuEditTab2CatDragItem">' +
                '<div>' + item.Name + '</div><div class="clearfix menuEditTab3ProdsIdText">' +
                '<div class="pull-left">ID: <span>' + item.Id + '</span></div><div class="pull-right">' +
                '<span>' + item.Price + '</span> €</div></div></div></div>';
        });
        $("#allp").append(parts);
    };

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

    $('#allp > div').draggable({
        //connectToSortable: '#sortable',
        helper: 'clone',
        revert: 'invalid',
        cursor: 'move'
    });

Итак, моя проблема в том, что я не могу заставить их работать вместе. Левый список перетаскивается, а сортируемый справа тоже работает но подключение не работает. Нет события сброса, которое срабатывает... Возможно ли это вообще? Если у кого-нибудь есть идея, чтобы получить эту работу?


drag-and-drop jquery knockout.js knockout-sortable
person chris    schedule 28.12.2014    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Когда плагин sortable получает перетаскиваемый элемент, он ожидает, что к элементу будут прикреплены некоторые метаданные, указывающие на фактический элемент данных, который следует удалить. Метаданные прикрепляются через функцию ko.utils.domData.set KO. Называется так:

ko.utils.domData.set(element, key, value);

Итак, перед тем, как элемент будет помещен в сортируемый, вы захотите прикрепить эти метаданные. Что-то типа:

$(".drag-item").draggable({
    connectToSortable: ".container",
    helper: "clone",
    start: function(event, ui) {
        ko.utils.domData.set(event.target, "ko_dragItem", true);
    }
});

Когда перетаскиваемый элемент удаляется, плагин пытается создать копию двумя способами, чтобы поместить ее в observableArray сортируемого элемента. Во-первых, он ищет функцию clone в элементе. Во-вторых, он запускает функцию dragged, настроенную в сортируемой привязке, и использует возвращаемое значение в качестве элемента.

Итак, сортируемая привязка может выглядеть так:

<div class="container" data-bind="sortable: { data: tasks, dragged: handleDraggedItem }">
    <div class="item" data-bind="text: name">
    </div>
</div>

С handleDraggedItem вроде:

this.handleDraggedItem = function(item, event, ui) {
    return new Task(ui.item.text());
};

Вот пример в jsFiddle: http://jsfiddle.net/rniemeyer/aewLbnrm/

Итак, вы хотели бы решить, как/где вы хотите построить свой предмет. Вы можете сделать это в перетаскиваемом методе start и просто вернуть элемент из вашей функции dragged или сделать это, как в моем примере, в функции dragged. Надеюсь, что все имеет смысл!

person RP Niemeyer    schedule 31.12.2014
comment
Спасибо за вашу поддержку! Завтра посмотрю ;-) - person chris; 01.01.2015
comment
как бы изменился handleDraggedItem, если бы Task имел другие свойства вместе с именем, у меня есть аналогичный вопрос здесь: stackoverflow.com/questions/29715384/ - person Arnab; 18.04.2015