javascript - "appendTo"- 在 jQuery UI 中将可拖动对象连接到可排序元素时，方法无法正常运行

Question

我正在尝试将一个 jQueryUI 可拖动元素连接到一个可排序元素，并且助手总是附加到主体。当我将可拖动元素拖到可排序元素上时，助手会插入到可排序元素中。尽管可排序元素都在拖动时附加到 body 元素。

$(".a").sortable({
    appendTo: document.body,
    connectWith: ".a",
    helper: "clone"
}).disableSelection();

$("section div").draggable({
    connectToSortable: ".a",
    helper: "clone",
    revert: "invalid",
    appendTo: document.body
}).parent().disableSelection();

为了演示我的问题，我制作了这个 fiddle :http://jsfiddle.net/fnmfndby/

正如您在拖动可排序元素时看到的那样，助手是绿色的。拖动可拖动元素时，它也是绿色的，但在可排序元素上拖动时，它会变成红色。

问候，领带

Answer 1

我通过将可拖动项目转换为可排序项目并使用 sortable-api 使其像可拖动项目一样解决了这个问题。

$(".a").sortable({
    appendTo: document.body,
    connectWith: ".a",
    helper: "clone"
}).disableSelection();

$("section").sortable({
    connectWith: ".a",
    appendTo: document.body,
    helper: "clone",
    receive: function (event, ui) {
        return false;
    },
    stop: function (event,ui) {
        $(this).html($(this).data('listhtml'));
        $(".serverList li").not(':has(.remove)').prepend('<a href="#" class="remove">&times;</a>');
    },
    start: function (event,ui) {
        $(ui.item).css('display','');
        $(this).data('listhtml', $(this).html());
    }
}).disableSelection();

对于遇到同样问题的人，我更新了演示:http://jsfiddle.net/fnmfndby/2/