我有一些用于开发可拖动/可丢弃物品的模式。层次结构如下
<script type="text/javascript">
$(function() {
$("#Menu").accordion({
autoHeight: false,
navigation: true,
collapsible: true
});
$(".sortable").sortable({
revert: false,
start: function(e, ui) {
draggedItem = ui.item;
}
});
$( ".draggable" ).draggable({
helper: "clone",
connectToSortable: ".sortable",
revert: "true"
});
});
</script>
此HTML的内容如下
<ul id="Menu">
<li>
<span class="head">Input</span>
<div class="childs">
<ul>
<li class="draggable">
<input type="checkbox"/>
</li>
<li class="draggable">
<input type="radio"/>
</li>
</ul>
</div>
<span class="head">Controls</span>
<div class="childs">
<ul>
<li class="draggable">
<input type="file"/>
</li>
<li class="draggable">
<input type="button"/>
</li>
</ul>
</div>
</li>
</ul>
<ul class="sortable">
<li> Drag elements Here.</li>
</ul>
主要问题是如果没有手风琴,Draggable Elements会提供一些视觉反馈,比如放置它们的位置。什么时候到手风琴结构(这些元素:
应用<span class="head">Controls</span> <div class="childs">
,然后反馈就在Draggable元素的UL内。我可以将它们放入Sortable区域。我只需要让他们在没有手风琴的情况下提供反馈......