如何在嵌入jquery后对嵌套div进行排序?

时间:2014-04-10 19:07:03

标签: jquery jquery-ui-sortable

大家好我有一个场景,用户可以在容器中拖放布局,然后内容也可以放在布局中

html的示例结构将是这样的

   <div class="box-container">

   <div style="display: block;" class="box">
       <div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <div style="display: block;" class="box">
<div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <a href="/index" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/10/1397140384493-fashion-fing_HPB_612_459_mini.jpg"  /></a>

                </div>
            </div>
        </div>
    </div>
                    <div style="display: block;" class="box">
        <div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <a href="/index" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/10/1397140384493-fashion-fing_HPB_612_459_mini.jpg"  /></a>

                </div>
            </div>
        </div>
    </div>
                    <a href="/index" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/10/1397140384493-fashion-fing_HPB_612_459_mini.jpg"  /></a>

                </div>
            </div>
        </div>
    </div>


   <div style="display: block;" class="box">
      <div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <div style="display: block;" class="box">
<div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <a href="/index" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/10/1397140384493-fashion-fing_HPB_612_459_mini.jpg"  /></a>

                </div>
            </div>
        </div>
    </div>

                    <a href="javascript:void(0)" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/9/1397022695018-ed-hardy_HPB_612_459_mini.jpg"  />

                    </a>
                     <div style="display: block;" class="box">
<div class="div-header">Content</div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel ui-droppable ui-draggable">
                    <a href="/index" >
                    <img src="http://myntra.myntassets.com/assets/banners/2014/4/10/1397140384493-fashion-fing_HPB_612_459_mini.jpg"  /></a>

                </div>
            </div>
        </div>
    </div>

                </div>
            </div>
        </div>
    </div>
</div>

盒子容器现在拿着所有的盒子我想要做的是让盒子容器中的所有盒子都可以排序,盒子里的这些盒子里的任何盒子都可以嵌套如何在这里应用sortable可以帮助我在这里

这里是html如何看起来的小提琴

 http://jsfiddle.net/CyJ8h/

0 个答案:

没有答案