Drag and sorting/drop div element by class or ID

user_18514717 0
Viewed 347

I want to drag and sort div elements by Jquery. Here I want to drag and sort div item as I want.

Please see my code:

 <div id="short" class="connected-sortable area">
      <div class="curve c2">
           <p class="cat">
              <a href="car.html">
              <img src="images/car.png" height="30" alt="" style="margin-bottom: 9px"> Car
              </a>
           </p>
          </div>
        <div class="curve c3">
           <p class="cat">
              <a href="bus.html">
              <img src="images/bus.png" height="30" alt="" style="margin-bottom: 9px"> Bus
              </a>
           </p>
        </div>
        <div class="curve c4">
           <p class="cat">
              <a href="apartment.html">
              <img src="images/apt.png" height="30" alt="" style="margin-bottom: 9px"> Apartment/House
              </a>
           </p>
        </div>
        <div class="curve c5">
           <p class="cat"> 
              <a href="hotel.html">
              <img src="images/hotel.png" height="30" alt="" style="margin-bottom: 9px"> Hotel/Room
              </a>
           </p>
        </div>
        <div class="collapse" id="catshow">
           <div class="curve c6">
              <p class="cat"> 
                 <a href="hotel.html">
                 <img src="images/helicopter.png" height="30" alt="" style="margin-bottom: 9px"> Helicopter
                 </a>
              </p>
           </div>
           <div class="curve c7">
              <p class="cat"> 
                 <a href="hotel.html">
                 <img src="images/plane.png" height="30" alt="" style="margin-bottom: 9px"> Chartered Plane
                 </a>
              </p>
           </div>
           <div class="curve c8">
              <p class="cat"> 
                 <a href="hotel.html">
                 <img src="images/yacht.png" height="30" alt="" style="margin-bottom: 9px"> Yacht & Boat
                 </a>
              </p>
           </div>
        </div>
        </div>
        
        <div class="text-center">
           <button class="btn btn-show-hide" type="button" data-toggle="collapse" data-target="#catshow" aria-expanded="false" aria-controls="catshow">
           Show more/less
           </button>
        </div>

script:

function renumber() {
  var count = 1;
  
  $('#short .curve').each(function () {
    $(this).find('.cat').text(count);
    
    count++;
  });
}

function init() {
  $( ".area" ).sortable({
      connectWith: ".connected-sortable",
      stack: '.connected-sortable'
    }).disableSelection();
}

$( init );

$( ".connected-sortable" ).on( "sortupdate", function( event, ui ) {
  renumber();
} );

Here I want to drag the .curve div so that I can sort the .curve div item. Suppose I want to move Bus first, Aparment/house second etc. Can you please help me to correct my code or write a better code for this.

jquery-ui html jquery javascript
1 Answers

Consider the following.

$(function() {
  function init() {
    $(".area").sortable({
      connectWith: ".connected-sortable",
      stack: '.connected-sortable',
      update: function(e, ui) {
        var results = [];
        $(".cat", this).each(function(i, el) {
          results.push($(el).text().trim());
        });
        console.log(results.toString());
      }
    }).disableSelection();
  }

  init();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="sort" class="connected-sortable area">
  <div class="curve c2">
    <p class="cat">
      <a href="car.html">
        <img src="images/car.png" height="30" alt="" style="margin-bottom: 9px"> Car
      </a>
    </p>
  </div>
  <div class="curve c3">
    <p class="cat">
      <a href="bus.html">
        <img src="images/bus.png" height="30" alt="" style="margin-bottom: 9px"> Bus
      </a>
    </p>
  </div>
  <div class="curve c4">
    <p class="cat">
      <a href="apartment.html">
        <img src="images/apt.png" height="30" alt="" style="margin-bottom: 9px"> Apartment/House
      </a>
    </p>
  </div>
  <div class="curve c5">
    <p class="cat">
      <a href="hotel.html">
        <img src="images/hotel.png" height="30" alt="" style="margin-bottom: 9px"> Hotel/Room
      </a>
    </p>
  </div>
  <div class="collapse" id="catshow">
    <div class="curve c6">
      <p class="cat">
        <a href="hotel.html">
          <img src="images/helicopter.png" height="30" alt="" style="margin-bottom: 9px"> Helicopter
        </a>
      </p>
    </div>
    <div class="curve c7">
      <p class="cat">
        <a href="hotel.html">
          <img src="images/plane.png" height="30" alt="" style="margin-bottom: 9px"> Chartered Plane
        </a>
      </p>
    </div>
    <div class="curve c8">
      <p class="cat">
        <a href="hotel.html">
          <img src="images/yacht.png" height="30" alt="" style="margin-bottom: 9px"> Yacht & Boat
        </a>
      </p>
    </div>
  </div>
</div>

<div class="text-center">
  <button class="btn btn-show-hide" type="button" data-toggle="collapse" data-target="#catshow" aria-expanded="false" aria-controls="catshow">Show more/less</button>
</div>

The renumbering function you created would change the Text of each Cat to a Number, removing all the content. You might consider .prepend() or .append(). You then have more issues as you now have to edit the new elements.

The List is the order. If you want to assign numbers, do so when you save the list order. Otherwise give the list a logical number up front:

  <div class="curve c2">
    <p class="cat">
      <span class="count">1.</span>
      <a href="car.html">
        <img src="images/car.png" height="30" alt="" style="margin-bottom: 9px"> Car
      </a>
    </p>
  </div>

When they are sorted, you can then renumber them as expected.

user_4633190
Related