HTML - How can I drag and drop on mobile in a fixed context

Question

Taking this example

<div class="dragable">Div1</div>
<div class="dragable">Div2</div>
<div class="dragable">Div3</div>
<div class="dragable">Div4</div>

How can I drag and drop for example the lowest div above the highest div (for example like manually sorting a list) on mobile devices?

I've tried the normal desktop drag and drop approach, but that did not seem to work.

Answer 1

You can use jQuery and sortable

HTML

<p>
    Drag and drop the items below
</p>

<div class="sorted-divs">
   <div class="sortable">Item 1</div>
   <div class="sortable">Item 2</div>
   <div class="sortable">Item 3</div>
   <div class="sortable">Item 4</div>
</div>

jQuery

$(".sorted-divs").sortable();

CSS

.sortable {
    padding: 20px;
    border: 1px solid black;
}

http://jsfiddle.net/8q96gtj5/