CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Ties
Ties

Reputation: 5846

"appendTo"-method not functioning correctly when connecting a draggable to a sortable element in jQueryUI

I am trying to connect a jQueryUI draggable element to a sortable element with the helper always appended to the body. When I drag the draggable element over to the sortable element, the helper gets inserted at the sortable element. Eventhough the sortable elements all append to the body element on drag.

$(".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 fiddle: http://jsfiddle.net/fnmfndby/

As you can see when dragging an sortable element the helper is green. When dragging the draggable element it is also green, but when dragging it over the sortable it turns red.

Regards, Ties

Upvotes: 4

Views: 1370

Answers (1)

Ties
Ties

Reputation: 5846

I solved it by converting the draggable item to a sortable item and with the sortable-api make it act like a draggable item. 

$(".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();

For people with the same problem i updated the demo: http://jsfiddle.net/fnmfndby/2/

Upvotes: 1

Related Questions