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

Question

我一直在玩 Ryan Niemeyer 出色的 knockout-sortable 插件，尤其是可拖动的示例。

我希望实现两件事：

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

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

http://jsfiddle.net/AC49j/125/

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（字符串）值。似乎这种变化使它按照您想要的方式运行。

第二个目标对我来说不太清楚。哪些项目应该可以放在哪些项目上？例如。右容器中的物品应该可以放在左容器的物品上吗？还是应该一切都能够放下/替换其他一切？排序呢，还需要吗？

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

    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);