如何使用jquery ui使父和子div可拉?

Question

我想把一个元素拖放到一个子元素上，这个子元素是用jquery ui拖放的。

此处Div-1,Div-2和Column是可拖动的元素。它们可以放到div中(Drop here)。我把Column放到div中(放到这里)。然后我想在Column上再放一个div，但是他们不能放。

这里是HTML代码…

<div id="draggable1" class="div">
<p>Div-1</p>
</div>
<div id="draggable2" class="div">
<p>Div-2</p>
</div>
<div id="column" class="div">Column</div>
<div id="droppable">
<p>Drop here</p>
</div>

和jquery部分…

$(function () {
$("#draggable1").draggable({
helper: "clone",
});
$("#draggable2").draggable({
helper: "clone",
});
$("#column").draggable({
helper: "clone",
});
$("#column").droppable({
drop: function (event, ui) {
$("#droppable").droppable("disable");
var columnItem = $(ui.draggable).clone();
console.log(columnItem);
$(this).append(columnItem);
},
});
$("#droppable").droppable({
drop: function (event, ui) {
var droppedItem = $(ui.draggable).clone();
console.log(droppedItem);
$(this).append(droppedItem);
},
});
});

Answer 1

我想更好的方法是使用dropable的贪心选项。如果你发现任何问题，不要忘记检查API。

http://api.jqueryui.com/droppable/option-greedy

下面是你的代码看起来像贪婪选项:

$(".child").droppable({ 
accept: '.item',
greedy: true,
drop: function(e, ui){ 
alert("drop on child");
}
});

好了…！！!