Тест перетаскивания Javascript

Я пробовал небольшую функцию с JQuery, которую я раньше не видел, и я не совсем уверен, как с этим справиться, поэтому я прошу выяснить, знает ли кто-нибудь из них умный способ снять это:

У нас есть несколько элементов, плавающих влево, в строке, содержащихся в содержащем div и нашем вызове функции jquery UI:

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

разметка:

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

Поэтому мой вопрос заключается в том, как я могу перетащить "1" и перебросить его между двумя другими элементами, чтобы он был помещен между ними, и фактически изменил положение в DOM, чтобы он аккуратно поплыл слева от строки, так же, как раньше, но в новом порядке?

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

JQuery UI Перетаскиваемая документация: http://jqueryui.com/draggable

Таким образом, возможно, это невозможно сделать с помощью простого пользовательского интерфейса JQuery. Если нет, то как?