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();

为了证明我的问题，我做了这个小提琴：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/

在jQuery UI中将draggable连接到可排序元素时，“append”-method无法正常运行

1 个答案: