Drag and sorting/drop div element by class or ID-CodePudding

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" >
      <div >
           <p >
              <a href="car.html">
              <img src="images/car.png" height="30" alt="" style="margin-bottom: 9px"> Car
              </a>
           </p>
          </div>
        <div >
           <p >
              <a href="bus.html">
              <img src="images/bus.png" height="30" alt="" style="margin-bottom: 9px"> Bus
              </a>
           </p>
        </div>
        <div >
           <p >
              <a href="apartment.html">
              <img src="images/apt.png" height="30" alt="" style="margin-bottom: 9px"> Apartment/House
              </a>
           </p>
        </div>
        <div >
           <p > 
              <a href="hotel.html">
              <img src="images/hotel.png" height="30" alt="" style="margin-bottom: 9px"> Hotel/Room
              </a>
           </p>
        </div>
        <div  id="catshow">
           <div >
              <p > 
                 <a href="hotel.html">
                 <img src="images/helicopter.png" height="30" alt="" style="margin-bottom: 9px"> Helicopter
                 </a>
              </p>
           </div>
           <div >
              <p > 
                 <a href="hotel.html">
                 <img src="images/plane.png" height="30" alt="" style="margin-bottom: 9px"> Chartered Plane
                 </a>
              </p>
           </div>
           <div >
              <p > 
                 <a href="hotel.html">
                 <img src="images/yacht.png" height="30" alt="" style="margin-bottom: 9px"> Yacht & Boat
                 </a>
              </p>
           </div>
        </div>
        </div>
        
        <div >
           <button  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.

CodePudding user response：

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" >
  <div >
    <p >
      <a href="car.html">
        <img src="images/car.png" height="30" alt="" style="margin-bottom: 9px"> Car
      </a>
    </p>
  </div>
  <div >
    <p >
      <a href="bus.html">
        <img src="images/bus.png" height="30" alt="" style="margin-bottom: 9px"> Bus
      </a>
    </p>
  </div>
  <div >
    <p >
      <a href="apartment.html">
        <img src="images/apt.png" height="30" alt="" style="margin-bottom: 9px"> Apartment/House
      </a>
    </p>
  </div>
  <div >
    <p >
      <a href="hotel.html">
        <img src="images/hotel.png" height="30" alt="" style="margin-bottom: 9px"> Hotel/Room
      </a>
    </p>
  </div>
  <div  id="catshow">
    <div >
      <p >
        <a href="hotel.html">
          <img src="images/helicopter.png" height="30" alt="" style="margin-bottom: 9px"> Helicopter
        </a>
      </p>
    </div>
    <div >
      <p >
        <a href="hotel.html">
          <img src="images/plane.png" height="30" alt="" style="margin-bottom: 9px"> Chartered Plane
        </a>
      </p>
    </div>
    <div >
      <p >
        <a href="hotel.html">
          <img src="images/yacht.png" height="30" alt="" style="margin-bottom: 9px"> Yacht & Boat
        </a>
      </p>
    </div>
  </div>
</div>

<div >
  <button  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 >
    <p >
      <span >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.