2

编辑：我希望最终克隆的元素可以拖动到 droppable 中的任何位置，我不希望它是可排序的。

我试图在拖放时将可拖动克隆元素附加到可放置元素。当可拖动元素在可放置元素内 时，我希望它（可拖动元素）在可放置元素内可拖动。现在可拖动克隆元素可以从它的位置拖动，当它被放下时它变得不可拖动。所以请帮助我实现我的目标。谢谢。

这是代码：

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});
.well {
    width: 150px;
    height: 150px;
    border: 3px solid red;
}
.ii{
  float:left;
  margin-top: 20px;
  margin-right: 20px;
  border: 3px solid blue;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="well">
    <div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>

4

1 回答 1

1

初始元素在文档就绪事件中创建为可拖动元素，但在您放置时创建的新元素永远不会在其上运行此代码。它需要添加到“drop”事件中：

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {        
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
        /* New stuff here: */
        $('.ui-draggable').draggable({
            helper: 'clone'
        });
    }
});
于 2016-09-20T20:10:23.010 回答