如何使Accordion Elements可排序和可拖动

时间:2012-03-29 06:37:26

标签: jquery html css jquery-ui accordion

我有一些用于开发可拖动/可丢弃物品的模式。层次结构如下

<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区域。我只需要让他们在没有手风琴的情况下提供反馈......

1 个答案:

答案 0 :(得分:0)

查看此链接。这应该有所帮助 -

Nested Sortable Jquery Plugin