Question

I’m working on project where DOM structure is something like this :

<div id="wrapper">

     <p> Some Text Goes Here </p>   

     <ul id="sortable">
          <li>list 1</li>
          <li>list 2</li>
          <li>list 3</li>
          <li>list 4</li>
          <li>list 5</li>
     </ul>

</div>

<textarea id="cloner" rows="50" column="50"></textarea>

I’m appending #wrapper.html() to #cloner.val() using following simple function :

$('#cloner').val($('#wrapper').html());

Now, #wrapper contains lot of dragable/sortable/editable events. So, what I want is to reflect those changes inside textarea

Example : If I drag list 5 to list 2 position, this change within DOM should reflect inside textarea live.

How can I achieve this ?

Answer 1

Use the .sortable() stop event, like so:

$( ".selector" ).sortable({
   stop: function() { $('#cloner').val($('#wrapper').html()); }
});