Javascript拖放测试

Question

I'm trying out a little feature with JQuery that I haven't seen before, and I'm not exactly sure how to handle it, so I'm asking to see if any of you know a clever way to pull it off:

We have a few elements floating left, in a row, held in a containing div and our jquery UI function call:

$(function() {
    $(".container_element" > div ).draggable();
});

markup:

<div class="container_element">
    <div style="float:left; width:50px; height:50px;">1</div>
    <div style="float:left; width:50px; height:50px;">2</div>
    <div style="float:left; width:50px; height:50px;">3</div>
    <div style="float:left; width:50px; height:50px;">4</div>
    <div style="float:left; width:50px; height:50px;">5</div>
</div>

So my question is how can I drag "1" and drop it in between two of the other elements to have it be placed in between them, and actually change position in the DOM, so that it neatly floats left with the row, just like before, but in a new order?

JS Fiddle: http://jsfiddle.net/JzaCg/

JQuery UI Draggable documentation: http://jqueryui.com/draggable

So, maybe this can't be done with plain JQuery UI. If not, how?

Answer 1

我认为您正在寻找可排序的jQuery UI http://jqueryui.com/sortable/