复制项目而不是移出淘汰赛可排序座位表示例 [英] Copying an item rather than moving in the knockout sortable seating chart example

问题描述

这是可剔除可排序的座位表示例: http://jsfiddle.net/UdXr4/ 根据此和 jsfiddle此处

This is the seating chart example of knockout sortable: http://jsfiddle.net/UdXr4/ Based on the answers of this 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);
    }
});

我无法解决的代码是handledraggeditem [返回新的Student(0，ui.item.text()，'')].我如何获取名称(我可以从文本中获取)以外的其他值(ID和性别)，以便可以在此处发送它们.

The code that I'm unable to solve is the handledraggeditem [return new Student(0,ui.item.text(),'')]. How can I get the other values (id and gender) except name(this I'm able to get from text) such that I can send them here..

因此，所拖动项目的$ data的ID为0，性别为"，如下所示.

Due to this the $data for the dragged items have 0 as id and '' as gender as below..

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

衷心感谢您的帮助

谢谢

推荐答案

当用户开始拖动元素时，当前正在为其附加true值:

When the user starts to drag an element, you are currently attaching a value of true to it:

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

无论您附加什么数据，都会将dragged:回调作为其第一个参数接收-在您的情况下，为handleDraggedItem:

Whatever data you attach there is what the dragged: callback will receive as its first argument — in your case, handleDraggedItem:

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

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

If you instead look up the Student that is bound to the dragged element with ko.dataFor and attach that:

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

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

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

your handleDraggedItem handler will receive that Student as its first argument, and you can call your Student.prototype.clone method on it:

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

这篇关于复制项目而不是移出淘汰赛可排序座位表示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！