Question

如下图所示,我有两组瓷砖。每张瓷砖是DIV。

""https://i.sstatic.net/yQSbx.png" alt="此处输入图像描述"/ >

我希望能够将一块瓷砖拖到一个组内的新位置,或者拖到相邻组内的新位置。

和8号窗口相似,我还想把一块瓷砖在一组中拖到两个组之间的空间,为瓷砖创建一个新的组。

""https://i.sstatic.net/ORhb8.png" alt="此处的内置图像描述"/"

在这里,我能够达到什么程度—— 我能够建立一个单一的小组, 能够拖动。

<div class="demo">
    <ul id="sortable">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default wide">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
    </ul>
</div>

http://jsfiddle.net/psivadasan/FmWCx/" rel="没有跟随 nofollow noreferrer">http://jsfiddle.net/psivadasan/FmWCx/

感谢您的帮助谢谢你抽空

Answer 1

过去我做过一些比喻, 这就是我如何做到的:http://jsfidle.net/dazefs/vGYVX/

<div style="background-color:Gray">

<ul id="sortable">
    <li>
      <span style="background-color:yellow">
         Item 1
       </span>

     </li>
    <li>
     <span style="background-color:red">
       Item 2
     </span>

    </li>
    <li>
      <span style="background-color:green">
     Item 3
     </span>

  </li>
    <li>
    <span style="background-color:Blue">
           Item 4
     </span>
     </li>
   </ul>

<ul id="sortable2" style="width:60%">
<li>
    <span style="background-color:yellow">
        Item 5
    </span>
</li>
    <li>
    <span style="background-color:red">
        Item 6
    </span>
</li>
    <li>
    <span style="background-color:green">
        Item 7
    </span>
   </li>
    <li>
       <span style="background-color:Blue">
          Item 8
       </span>
   </li>
</ul>

 </div>

$(function () {
    $("#sortable, #sortable2").sortable({
        connectWith: "#sortable2, #sortable",
        receive: function (event, ui) {
             alert( item has been sorted );
         }
    });

    //})
});

<强>,用3个瓷砖组实现:

http://jsfiddle.net/dazefs/XRdz6/

Answer 2

小费:http://jsfiddle.net/iambriansreed/A8NYw/" rel="no follow">http://jsfiddle.net/iambriansreed/A8NYw/

$(function() {
    $("#sortable1,#sortable2")
        .sortable({ connectWith: ".sortable"})
        .disableSelection();
});

友情链接