Question

我一直在玩Ryan Niemeyer的优秀knockout-sortable插件，特别是可拖动的例子。

我希望实现两件事：

创建一个可观察的可拖动项目数组。
我想将拖动的项目拖放到可排序列表中的项目并替换它们的值，而不是将项目拖到可排序列表中。

在下面的小提琴中，我已经开始了第一个目标，但Text: name绑定不起作用。我很感激对此和第二个目标的任何指导。

Answer 1

我不完全确定您的代码问题是什么，已经很好用了:)。我认为我看到你的问题与文本有什么关系：名称绑定，我认为下面的更改按照你想要的方式修复它：

<div id="draglist" data-bind="foreach: newTask">
    <div class="item" data-bind="draggable: $data"> // Changed from data-bind="draggable: name()"
        <span data-bind="text: name"></span>
    </div>
</div>

这种情况下的$ data表示整个任务，而name（）表示任务的可观察名称属性的ACTUAL（字符串）VALUE。似乎这种变化使它按照你想要的方式发挥作用。

第二个目标对我来说不太清楚。哪些物品应该可以放在哪些物品上？例如。来自右侧容器的物品是否可以放在左侧容器的物品上？或者是否应该能够完全放弃/替换其他所有内容？怎么样排序，甚至还需要？

jQuery droppable自定义绑定（响应下面的评论）

    ko.bindingHandlers.droppable = {
        init: function (element, valueAccessor) {
            var $element = $(element),
                options = ko.unwrap(valueAccessor());

            $element.droppable(options.settings);

            if (!options.enable) {
                $element.droppable('disable');
            }

            // Handle disposal
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $element.droppable('destroy');
                $element = null;
            });
        },
        update: function (element, valueAccessor) {
            var $element = $(element),
                options = ko.unwrap(valueAccessor()),
                action = options.enable ? 'enable' : 'disable';

            $element.droppable(action);
        }
    };

使用它：

// HTML
<div data-bind="droppable: { settings: droppableSettings, enable: canDrop }"></div>

// JS (viewmodel)
var droppableSettings = {
    drop: function (event, ui) {
        var dropTarget = ko.dataFor(this);
        // perform your replace logic
    },
    hoverClass: 'container-hover',
    over: function () {
        // Handle over-event from jQuery droppable
    },
    tolerance: 'pointer'
    // For more settings, see http://api.jqueryui.com/droppable/
},
canDrop = ko.observable(true);

可观察的可拖动项目数组以及将值拖放到可排序列表项目上

1 个答案: