可拖動列表到html5表中有錯誤

Question

有兩個項目列表需要映射到一個表中。 我創建了表和可拖動列表項，然后創建了引用樣式的鏈接，該鏈接指向使用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都是可拖放的，並且每個span都接受不同的可拖動字段。