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>

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

有什么想法吗？

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

Answer 1

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

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

当触发其中一个项目的droppable - 绑定时，您既可以引用要移动的项目，也可以引用要移动到的项目。

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

下面的代码段演示了sortable和draggable：

的组合

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用knockout sortable在drop上组合对象

1 个答案: