Use a button click to set a jQuery UI sortable element to first position

Question

I am trying to add the following function to a Sortable group of divs. I would like to have a button (could be anything really) in each div which when clicked will place it in the first position of the group.

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

These are the divs.

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

This is my call to sortable.

I have created a jsFiddle showing what I mean. I've tried to look up if it is possible but didn't find anything similar.

Any ideas?

Answer 1

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

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

Answer 2

I don't think this is the correct markup for your code to work.

I was reading the jquery sortable() API documentation and from what I've read you have to provide the elements in a list, even if you want to display it as a grid.

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