I have a list of elements, each element has an id which equals to its order in this list. Now I am changing the order of these elements by dragging them around.

I have got the following two questions:

1. How can I achieve the effect that when an element is dragging around, it will push up or down the elements which are above or below it?

2. I want to dynamically change the ids of these elements to their order in the list. For example, assume there are four elements, when the first element is dragged to the bottom, it id will change to 3, and the ids of the elements above it will change accordingly. (Notice that the elements are not necessarily of equal height.)

Here is a snippet of my code, you may access / to see more detailed code:

<div id="container">
    <div class="draggable" id="0">
        <p> dummy text </p>
        <p> dummy text </p>
    </div>

    <div class="draggable" id="1">
        <p> dummy text dummy text </p>
    </div>

    <div class="draggable" id="2">
        <p> dummy text dummy text dummy text </p>
    </div>

    <div class="draggable" id="3">
        <p> dummy text dummy text dummy text </p>
    </div>

</div>

I have a list of elements, each element has an id which equals to its order in this list. Now I am changing the order of these elements by dragging them around.

I have got the following two questions:

1. How can I achieve the effect that when an element is dragging around, it will push up or down the elements which are above or below it?

2. I want to dynamically change the ids of these elements to their order in the list. For example, assume there are four elements, when the first element is dragged to the bottom, it id will change to 3, and the ids of the elements above it will change accordingly. (Notice that the elements are not necessarily of equal height.)

Here is a snippet of my code, you may access http://jsfiddle/shapeare/bL8jz3rp/4/ to see more detailed code:

<div id="container">
    <div class="draggable" id="0">
        <p> dummy text </p>
        <p> dummy text </p>
    </div>

    <div class="draggable" id="1">
        <p> dummy text dummy text </p>
    </div>

    <div class="draggable" id="2">
        <p> dummy text dummy text dummy text </p>
    </div>

    <div class="draggable" id="3">
        <p> dummy text dummy text dummy text </p>
    </div>

</div>

• javascript
• jquery
• html
• jquery-ui
• jquery-ui-draggable

2 Answers 2

You can achieve the first functionality using jQuery ui sortable widget, as Sanjeev already pointed out.

To answer your second question, you can use the index() method inside update event callback of sortable as shown below:

$("#container").sortable({
  update: function(e, ui) {
    $("#container div").each(function(i, elm) {
      $elm = $(elm); // cache the jquery object
      $elm.attr("id", $elm.index("#container div"));
      // below is just for demo purpose
      $elm.text($elm.text().split("id")[0] + "id: " + $elm.attr("id"));
    });
  }
});

<link href="//code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery./ui/1.10.3/jquery-ui.js"></script>
<div id="container">
  <div class="draggable" id="0">
    <p>dummy text</p>
  </div>

  <div class="draggable" id="1">
    <p>dummy text dummy text</p>
  </div>

  <div class="draggable" id="2">
    <p>dummy text dummy text dummy text</p>
  </div>
  <div class="draggable" id="3">
    <p>dummy text dummy text dummy text</p>
  </div>

</div>

Related answer (mine)

Changing ids is not a good practice.
However you can achieve same affet by changing class $('.my_class').removeClass('my_class').addClass('normal_element');

But u can change id like this $('#your_element').attr('id','the_new_id');
In your problem,you can use The jQuery UI Sortable plugin and get the order of ids in a array.
You can then add or remove class to achieve affects.

Check the below example. It shows how to use sortable and get the order of ids in an array. For more details on the methods check the doc: http://jqueryui./sortable/

$(function(){
  
    $("#sortable").sortable();
    var idArr=$( ".myList" ).sortable( "toArray" );
    jQuery(".IdList").text(idArr.join());
    $( ".myList" ).sortable({
        stop: function( event, ui ) {
            
              var idArr=$( ".myList" ).sortable( "toArray" );
              jQuery(".IdList").text(idArr.join());
    
        
        }
    });
       
});

<link rel="stylesheet" href="//code.jquery./ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.10.2.js"></script>
<script src="//code.jquery./ui/1.11.2/jquery-ui.js"></script>

<strong>Id Order:</strong><div class="IdList"></div><br />
<strong>Drag Items to reorder</strong><br />
<ul id="sortable" class="myList">
  <li id="1">Item 1</li>
  <li id="2">Item 2</li>
  <li id="3">Item 3</li>
  <li id="4">Item 4</li>
  <li id="5">Item 5</li>
</ul>