jquery - 如何使用 jQuery sortable 重新排序可排序父对象的子对象

Question

我有以下 HTML 结构：

<div id='tiles'>

    <div class='slot'>
         <span class='slotNum'>1</span>
         <div class='tile'></div>
    </div>   

    <div class='slot'>
         <span class='slotNum'>2</span>
         <div class='tile'></div>
    </div>    

    <div class='slot'>
        <span class='slotNum'>3</span>
        <div class='tile'></div>
    </div>    

</div>

我希望能够重新排列插槽之间的瓷砖。如果我开始将#1 下的磁贴拖到#2 磁贴，我希望#2 磁贴移到#1 下。如果您尝试使用 JSFiddle，则 #2 磁贴目前只是堆叠在重新排序的磁贴下方。

JSFiddle

Answer 1

您错误配置了项目选项 - 我认为在您的示例中它应该设置为 .slot，而不是 .tile。

$( "#tiles" ).sortable({ 
    items: ".slot",
});

http://jsfiddle.net/uBFtr/5/

默认情况下，项目选项设置为> *选择器，这意味着任何子元素（不是子子元素），因此在您的示例中根本不需要指定它。