Question

I’am currently working on a web application in which I would have a page with a list of editable text areas and I would like to be able to change their order, simply by dragging and dropping each text area in the wanted position.

Basically, each of these text areas would come nested in , like this:

<div class="outsideDiv">
    <div>
        <textarea>

        </textarea>            
    </div>       
</div>

As I was trying to implement Drag and Drop feature using native HTML5 “draggable” attribute (more precisely, I put it as attribute of my most outside ), I noticed that would make my text areas draggable but also yield a side effect: whenever I click in the text area, it would, the typing cursor would always be at position 0. Thus, it is then impossible to move the cursor to another position, which is not that handy in case you want to edit an existing text.

So my question is, how could I make a text area draggable while keeping all of its features (I mean, without the mentioned side-effect)?

Answer 1

Have a look at the draggable effect in jQuery-ui (http://jqueryui.com/demos/draggable/)