Question

我注意到这里的jsfiddle - http://jsfiddle.net/stevea/T4sGh/1/ - 当你将红色框拖放到米色盒子上时，看起来就像红色框进入米色盒子里面一样，但是在HTML中，它实际上变成了米色盒子的兄弟，只是给它偏移，将它放在米色盒子上：

<body style="cursor: auto;">
   <div id="box" class="ui-droppable"></div>
   <div id="redBox" class="ui-draggable" style="position: relative; left: 89px; top: -213px;"></div>
</body>

这是出乎意料的。我不记得任何讨论这个问题的jQuery-UI文档。有没有人能够感受到这里发生了什么，也许能够指出一些文档？

由于

Answer 1

如果您查看此jQuery UI页面上的示例，您会发现这是默认行为。

如果您希望dragable对象成为dropable对象的子对象，则必须在drop函数中手动附加它，如：

 $(this).append($(ui.helper[0]));

提及accept : '#redBox'的全部目的是当您将#redBox放在dropable div上时，drop事件会被触发。

Answer 2

draggable和droppable默认情况下不会更改DOM。如果您想这样做，您可以利用他们公开的事件。这是您的fiddle已更新。我正在使用drop事件来重新定位draggable容器中的droppable：

var cell_dropOps = {     
    drop : box_drop,        
    accept : '#redBox',
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css({ top: 0, left: 0});
    }
};

jQuery-UI drop并没有真正丢弃droppable中的任何内容

2 个答案: