CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-drop
user2700923
user2700923

Reputation:

Javascript drag and drop test

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?

Upvotes: 0

Views: 667

Answers (1)

Enermis
Enermis

Reputation: 697

I think you are looking for the jQuery UI sortable http://jqueryui.com/sortable/

Upvotes: 1

Related Questions