如何让div在html中相互可拖动？

Question

<div class="player-tab">
    <div class="img-wrap" draggable="true">
        <img src="assets/player.png" alt="">
    </div>
    <div class="img-wrap" draggable="true">
        <img src="assets/player.png" alt="">
    </div>
    <div class="add-recording"> <a href="#">+ Add Recording</a>

    </div>
</div>

In this code anyone can add recording and a player image show them after add. I want to img-wrap draggable to each other.

I means I upload 1 record and 2 record. I can sort it to 2nd first and 1st later. This way it's can be sorting in format as user want. Someone know any good idea to implement this feature.

Answer 1

You can use jQuery:

  $(function() {
    $( "#divid" ).draggable();
  });

see this: http://jqueryui.com/draggable/

I think you want this:

 $(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
 });

check here: http://jqueryui.com/sortable/