在 knockout sorting seating chart 示例中复制一个项目而不是移动

Question

这是淘汰赛的座位表示例：http://jsfiddle.net/UdXr4/ 根据 and this, I tried to change the seating chart example such that the items from available students copied rather than moved as in the jsfiddle here

的回答

变化如下：

......
......
<div class="seats" data-bind="sortable: { data: students, allowDrop: $root.isTableFull, dragged: handleDraggedItem }">
......
......
<div class="new" data-bind="sortable: availableStudents">
        <div class="student available" data-bind="text: name"></div>
    </div>
.......
.......
Student.prototype.clone = function() {
    return new Student(this.id,this.name(),this.gender);
};
.......
.......
this.handleDraggedItem = function(item, event, ui) {
        console.log("handleDraggedItem");
        **return new Student(0,ui.item.text(),'');**
    };
.......
.......
$(".available").draggable({
    connectToSortable: ".seats",
    helper: "clone",
    start: function(event, ui) {
        ko.utils.domData.set(event.target, "ko_dragItem", true);
    }
});

我无法解决的代码是 handlerraggeditem [return new Student(0,ui.item.text(),'')]。我怎样才能获得除名称（我可以从文本中获取）之外的其他值（id 和性别），以便我可以将它们发送到这里..

因此，拖动项的 $data 的 ID 为 0，性别为 ''，如下所示。

{
          "id": 9,
          "name": "Kylie",
          "gender": "female",
          "group": "griffindor"
        },
        {
          "id": 0,
          "name": "Angel",
          "gender": "",
          "group": ""
        }

真诚感谢任何帮助

谢谢

Answer 1

当用户开始拖动一个元素时，您当前正在为其附加一个 true 的值：

$(".available").draggable({
    connectToSortable: ".seats",
    helper: "clone",
    start: function(event, ui) {
        ko.utils.domData.set(event.target, "ko_dragItem", true); // <---
    }
});

无论您附加什么数据，dragged: 回调都会接收到第一个参数——在您的例子中，handleDraggedItem:

this.handleDraggedItem = function(item, event, ui) {
  // 'item' is now 'true'
  console.log("handleDraggedItem");
};

如果您改为使用 ko.dataFor 查找绑定到拖动元素的 Student 并附加它：

start: function(event, ui) {
  var student = ko.dataFor(event.target);

  ko.utils.domData.set(event.target, "ko_dragItem", student);
}

您的 handleDraggedItem 处理程序将接收 Student 作为其第一个参数，您可以对其调用 Student.prototype.clone 方法：

this.handleDraggedItem = function(item, event, ui) {
  return item.clone();
};

在 knockout sorting seating chart 示例中复制一个项目而不是移动

Copying an item rather than moving in the knockout sortable seating chart example

knockout.js

knockout-sortable