jquery - 将元素从一个 div 拖到另一个 div 并排序

Question

我有 x 个小 div(我们称它们为 inner-div)和 y 个 container-div。

我希望能够将 inner-div 拖到其他 container-div 并让它们与该 div 中当前的任何内容排序。

我已经有了我的 div，并且添加了可拖动功能。

container-div 是这样创建的:

if($('#' + containter).length > 0) {
    //do nothing
} else {
    $('.info').append(
        $('<div>').attr({
            'id' : containter,
            'class' : 'container-div'
        }).html('<h3>' + title + '</h3>')
    );
}

inner-div 是这样创建的:

$('#' + container).append(
    $('<div>').attr({
        class: 'inner-div'
    }).html('<img src="' + img + '">&nbsp;' + name).draggable({
        opacity: 0.7,
        helper: "clone"
    })
);

我想知道，如何将一个 inner-div 移动到另一个 container-div 并将其“卡入”到位？

Answer 1

这是一个如何设置拖放的示例。

    $('.inner-div').draggable({containment: 'body'});        

    $('.container-div').droppable({accept: '.inner-div'});

    $('.container-div').on('drop', function(event, ui) {
        $(this).append(ui.draggable);
        $(ui.draggable).css({left: '0', top: '0'});
    });