1

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

我有一个大的 DIV (.pins_dragger) 元素，它固定在布局上。DIV.pins_dragger 包含其他一些可拖动的 DIVS (.group)。DIV.group 包含 UL 和 LI。每个 LI 仅包含一个 DIV(.pin)。

任务：

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

http://jsfiddle.net/dVyBm/3/

<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/

4

0 回答 0