Question

我是js和jquery的新手，我很难编写这个任务：

我有一个很大的DIV（.pins_dragger）元素，它在布局上修复。 DIV.pins_dragger包含一些其他可拖动的DIVS（.group）。 DIV.group包含UL和LI。每个LI只包含一个DIV（.pin）。

任务：

每个DIV.pin都可以在DIV.group中自由拖动。每个DIV.pin都可以自由移动到任何其他DIV.group。
如果DIV.pin退出它的DIV.group并位于另一个DIV.group外（在DIV.pins_dragger的可用空间上），那么它会在此位置创建新的DIV.group。
如果DIV.pin是DIV.group中的最后一个并且移出到另一个div.group，那么这个Div.group会破坏。在拖动一个空闲空间时，父DIV.group不会破坏，只会与孩子一起拖拽。

<div class="pins_dragger">
  <div class="group" id="group_1">
   <ul id="sortable1" class="droptrue">
       <li><div class="ui-widget-content pin">1</div></li>
       <li><div class="ui-widget-content pin">2</div></li>
       <li><div class="ui-widget-content pin">3</div></li>
       <li><div class="ui-widget-content pin">4</div></li>
       <li><div class="ui-widget-content pin">5</div></li>
   </ul>
</div>
<div class="group" id="group_2">
   <ul id="sortable2" class="droptrue">
        <li><div class="ui-widget-content pin">1</div></li>
        <li><div class="ui-widget-content pin">2</div></li>
        <li><div class="ui-widget-content pin">3</div></li>
        <li><div class="ui-widget-content pin">4</div></li>
        <li><div class="ui-widget-content pin">5</div></li>
   </ul>
</div>
<div class="group" id="group_3"> 
   <ul id="sortable3" class="droptrue">
   </ul>
</div>

更新：

这个想法可以在这个JSFiddle中显示：http://jsfiddle.net/VGUS2/

可拖动LI中的JQuery Draggable DIV移动到新DIV或创建新DIV

0 个答案: