Question

我有一小部分小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'});
    });

将项目从一个div拖动到另一个div并进行排序

1 个答案: