使用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,output