通过class或ID拖拽sorting/dropdiv元素

Question

我想按 Jquery 拖动和排序 div 个元素。在这里，我想根据需要拖动和排序 div 项。

请看我的代码：

 <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>

脚本：

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();
} );

这里我想拖动.curvediv这样我就可以对.curvediv项进行排序。假设我想先移动 Bus，然后 Aparment/house 等等。你能帮我更正我的代码或为此编写更好的代码吗？

Answer 1

考虑以下因素。

$(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>

您创建的 renumbering 函数会将每只猫的文本更改为数字，从而删除所有内容。您可以考虑 .prepend() 或 .append()。然后您会遇到更多问题，因为您现在必须编辑新元素。

List就是顺序。如果您想分配号码，请在保存列表顺序时执行此操作。否则预先给列表一个逻辑数字：

  <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>

排序后，您可以按预期重新编号。

通过class或ID拖拽sorting/dropdiv元素

Drag and sorting/drop div element by class or ID

html

javascript

jquery

jquery-ui