使用按钮单击将 jQuery UI 可排序元素设置为第一个位置答案

【问题标题】：Use a button click to set a jQuery UI sortable element to first position使用按钮单击将 jQuery UI 可排序元素设置为第一个位置
【发布时间】：2013-09-23 08:36:38
【问题描述】：

我正在尝试将以下功能添加到可排序的 div 组中。我想在每个 div 中有一个按钮（实际上可以是任何东西），单击该按钮会将其放置在组的第一个位置。

<div id="sortable" class="content">
    <div class="tile">
        <div class="tile_header"><span class="header_text">Header 1</span></div>
        This is div 1.
        <br/><input type="button" name="button1" id="button1" value="Make me First"/>
    </div>
    <div class="tile">
        <div class="tile_header"><span class="header_text">Header 2</span></div>
        This is div 2.
        <br/><input type="button" name="button2" id="button2" value="Make me First"/>
    </div>
    <div class="tile">
        <div class="tile_header"><span class="header_text">Header 3</span></div>
        This is div 3.
        <br/><input type="button" name="button3" id="button3" value="Make me First"/>
    </div>
    <div class="tile">
        <div class="tile_header"><span class="header_text">Header 4</span></div>
        This is div 4.
        <br/><input type="button" name="button4" id="button4" value="Make me First"/>
    </div>
</div>

这些是 div。

$(function() {  
    $( "#sortable" ).sortable({ 
        handle:".tile_header",
        revert:true
    });  
});

这是我对 sortable 的调用。

我创建了一个jsFiddle 来说明我的意思。我试图查找是否可能，但没有找到类似的东西。

有什么想法吗？

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-sortable

【解决方案1】：

 $(function () {      
    $("input:button").click(function () {
        $(this).parents(".tile").prependTo("#sortable");
    });
 });

http://jsfiddle.net/GrDBW/2/

【讨论】：

优秀。完全按照我的需要工作。我可能会使用一个类作为选择器，因为我会有其他按钮，但这是一个很小的变化。
是的，我也想提到使用类但忘了:)！
我想 +1 你的答案，但还没有足够的声誉。对不起。
请不要这样！你把它标记为答案，我很高兴:)

【解决方案2】：

我认为这不是让您的代码正常工作的正确标记。

我正在阅读 jquery sortable() API 文档，根据我所阅读的内容，您必须提供列表中的元素，即使您想将其显示为网格。

http://jqueryui.com/sortable/#display-grid

【讨论】：

根据我的阅读，我认为它们不一定在列表中。我发现了很多只使用 div 的示例。