按類或ID拖放div元素

我想通過 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 項進行排序。假設我想首先移動公共汽車，其次是公寓/房屋等。請您幫我糾正我的代碼或為此撰寫更好的代碼。

uj5u.com熱心網友回復：

考慮以下。

$(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()。然后您會遇到更多問題，因為您現在必須編輯新元素。

串列是順序。如果要分配編號，請在保存串列順序時執行此操作。否則，請預先給串列一個邏輯編號：

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

對它們進行排序后，您可以按預期對它們重新編號。

標籤：javascript html jQuery jQuery-ui

上一篇：回應式柔性行顯示，直到達到最小寬度

下一篇：在jQueryUIdatepicker中選擇日期后將類添加到額外的日期