Question

这是淘汰赛排序的座位表示例：http://jsfiddle.net/UdXr4/ 根据{{3}}和this的答案，我尝试更改座位表示例，以便复制可用学生的项目，而不是像this中那样移动

更改如下所示：

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

我无法解决的代码是processedraggeditem [return new Student（0，ui.item.text（），''）]。如何获取除名称之外的其他值（id和性别）（我可以从文本中获取），以便我可以将它们发送到此处..

由于这个原因，被拖动项目的$数据的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");
};

如果您使用Student查找与拖动元素绑定的ko.dataFor并附加：{/ p>

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

复制项目而不是移动到可拆卸的可排序座位表示例中

1 个答案: