The "appendTo" method does not work correctly when connecting a draggable to a sortable element in jQueryUI

Question

I am trying to connect a dragged jQueryUI element to a sortable element, where the helper is always added to the body. When I drag and drop a dragged item onto a sortable item, the helper gets into the sorted item. Although sortable items are added to the body element when dragging and dropping.

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

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

To demonstrate my problem, I made this script: http://jsfiddle.net/fnmfndby/

As you can see when dragging a sortable item, the helper is green. When you drag and drop a dragged item, it is also green, but when you drag it over the sorted item, it turns red.

Regards, Relations

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/