使用淘汰赛可排序组合放置对象

Question

我有 2 个列表绑定到包含相同类型对象的 observableArrays。我想将一个项目从一个列表拖到另一个列表，但我不想将它添加为一个新项目，而是想将它与我拖放到的项目结合起来。

<div>
    <ul data-bind="sortable: { data: customerFields, afterMove: myDropCallback, dragged: myDraggedCallback }">
        <li><span data-bind="text: source"></span></li>
     </ul>
 </div>

 <div>
      <ul data-bind="sortable: { data: mapFields, afterMove: myDropCallback, dragged:myDraggedCallback }">
        <li><span data-bind="text: source"></span> = <span data-bind="text: destination"></span></li>
      </ul>
 </div>

对象包含“源”和“目标”属性，当我从第一个列表中拖动项目并将其放在第二个列表中的项目上时，我想调用一个可用于设置目标的函数items "source" 属性到被删除的项目的值。

有什么想法吗？

我正在使用https://github.com/rniemeyer/knockout-sortable，它似乎有一个拖动事件，但它看起来不支持我想做的事情。

Answer 1

knockout-sortable不仅提供了sortable-binding，还提供了droppable-binding。这些可以组合使用以获得您想要的结果。

您的容器保留sortable-binding，但列表中的每个项目也获得droppable-binding，使它们成为有效的移动目标。

当这些项目之一上的droppable-binding 被触发时，您将获得对正在移动的项目的引用和对它被移动到的项目的引用。

从那里你可以做任何你想做的事情，例如，你可以从父容器中删除被拖动的项目并将其与被拖动到的项目合并。

下面的sn-p演示了sortable和draggable的组合：

var Item = function(description) {
  var self = this;
  
  self.description = ko.observable(description);
  
  self.dropTo = function(droppedElement) {
    console.log("Drop target: " + self.description());
    console.log("Dropped element: " + droppedElement.description());
  };
};

var ViewModel = function() {
  var self = this;
  
  self.items = ko.observableArray([
    new Item("Item1"),
    new Item("Item2"),
    new Item("Item3"),
    new Item("Item4")
  ]);
  
  self.dropTo = function(arg1) {
    console.log(this);
    console.log(arg1);
  };
};

ko.applyBindings(new ViewModel());

.container {
  background-color: #999;
  padding: 4px;
}

.item {
  background-color: #ccc;
  margin: 4px;
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-sortable/1.1.0/knockout-sortable.min.js"></script>

<div class="container" data-bind="sortable: items">
  <div class="item" data-bind="text: description, droppable: { data: dropTo }"></div>
</div>