如何使用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 tile当前只会堆叠在重新排序的tile下。

JSFiddle

Answer 1

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

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

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

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