jQuery：删除的div仅在第二次单击后才能排序

Question

When I drop some divs into a sortable pane, I can grab the newly created divs only after the second time I click on them. I suppose this is a refresh-related issue, but I cannot figure out how to make it work.

Here is the jsfiddle: http://jsfiddle.net/DvE5Q/ And the code:

$(".box").draggable({
   helper: 'clone'
});
$("#left").droppable({
    accept: '.box.out',
    drop: function (e, ui) {
        $(this).append('<div class="box"></div>');
        var droppedBox = $(this).children().last();
        $(droppedBox).html(ui.helper.html());
    }
});
$("#left").sortable();

Thanks for your help!

Answer 1

I would use the attribute connectToSortable: '#left'

DEMO http://jsfiddle.net/DvE5Q/1/

$(".box").draggable({
   helper: 'clone',
   connectToSortable: '#left'
});

$("#left").droppable({
    accept: '.box.out',
    drop: function (e, ui) {

    }
});

$("#left").sortable();