javascript - 使用 appendChild 时，SortableJS 多拖不起作用

Question

我有两个动态创建的元素列表，问题组（左）和问题（右）。我希望能够将右侧列表中的多个问题拖到左侧的问题组中，并将这些问题附加到适当的问题列表中。当我单步执行代码时，问题似乎被附加了，但我相信 SortableJS 会以某种方式出错或取消附加。

问题可能在于混合普通 JS 和 SortableJS。这个普通的 JS 事件具有我希望获得的 appendChild 代码：

    document.addEventListener("drop", function (event, target) {
        event.preventDefault();

        //Element being moved.
        var data = event.dataTransfer.getData("Text/html");

        if (event.target.classList.contains("question-group-item") && !$(data).get(0).classList.contains("question-group-item")) {
            //Blink group item being dropped into.
            $(event.target).effect("highlight", { color: "#0093d2" }, 3000);

            //Get group being dropped to.
            var groupID = $(event.target).attr('data-group-id');

            //Get all items being dropped.
           sortableArray.forEach(function (questionElem) {
                $(questionElem).attr('data-group-id', groupID);
                document.getElementById("list-tab-" + groupID).appendChild(questionElem);
            });

            //Set new group ID.
            //document.getElementById($(data).attr('id')).setAttribute('data-group-id', groupID);
            //document.getElementById("list-tab-" + groupID).appendChild(document.getElementById($(data).attr('id')));
        }

        updateObjects();
    });

这是一个 JS Bin：

https://jsbin.com/xakajusedu/edit?js,输出

标签： javascriptsortablejs