可拖动列表到html5表有bug

Question

需要将两个项目列表映射到表中。我创建了表和可拖动列表项，然后是Accessing table cell data within list items with Javascript的引用样式链接。

目前情况

我有两个列表，需要填入两列（使用不同的ID）;理想情况下，信用卡列表项只能放入信用卡列，反之亦然，用于api列表和api字段。

当前问题

1. 当我将项目从api列表拖动到api字段时，它显示双重文本。
2. 两个列表项可以拖入不同的字段。如何将列表项限制为匹配的表列？

以下是JsFiddle以及一些示例代码：

$("#ccField li").draggable({
  appendTo: "body",
  helper: "clone",
  cursor: "move",
  revert: "invalid"
});

$("#apiField li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
});

ccDroppable($("#creditCardApiTable table td"));

apiDroppable($("#creditCardApiTable table td"));

function ccDroppable($elements) {
    $elements.droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-drop-hover",
        accept: ":not(.ui-sortable-helper)",

        over: function (event, ui) {
            var $this = $(this);
        },
        drop: function (event, ui) {
            var $this = $(this);
            $("<span></span>").text(ui.draggable.text()).appendTo(this);
            $("#ccList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
        }
    });
}

function apiDroppable($elements) {
    $elements.droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-drop-hover",
        accept: ":not(.ui-sortable-helper)",

        over: function (event, ui) {
            var $this = $(this);
        },
        drop: function (event, ui) {
            var $this = $(this);
            $("<span></span>").text(ui.draggable.text()).appendTo(this);
            $("#apiList").find(":contains('" + ui.draggable.text() + "')")[0].remove();
        }
    });
}

Answer 1

这是你在找什么？ http://jsfiddle.net/ryaL3xpk/3/

$("#ccField li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
});

$("#apiField li").draggable({
    appendTo: "body",
    helper: "clone",
    cursor: "move",
    revert: "invalid"
});

function droppableField($element, $accept) {
    $element.droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-drop-hover",
        accept: $accept,
        over: function (event, ui) {
            var $this = $(this);
        },
        greedy:true,
        tolerance:'touch',
        drop: function (event, ui) {
            var $this = $(this);
            $this.text(ui.draggable.text()).appendTo(this);
        }
    });
}

droppableField($('#creditCardApiTable table td .ccDropField'), '#ccField li');
droppableField($('#creditCardApiTable table td .apiDropField'), '#apiList li');

基本上，你允许每个span可以放弃，并且每个都接受不同的可拖动字段。