为Sortable拖拽区块添加动态排序序号提示（Tooltip/控制台）

Got it! I've enhanced your jQuery UI Sortable implementation to add real-time global position tracking. Now every item will show its overall global rank (not just within its column) via a tooltip, and the rank updates instantly whenever you drag and drop items. Here's the full working code with explanations:

Full Updated Code #

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<h1>Sort listing using drag & drop</h1>
<div class="sortit">
  <ul class="sortable">
    <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  </ul>
  <ul class="sortable">
    <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  </ul>
  <ul class="sortable">
    <li class="ui-state-default" id="8"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
    <li class="ui-state-default" id="9"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
    <li class="ui-state-default" id="10"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
  </ul>
  <ul class="sortable">
    <li class="ui-state-default" id="11"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
    <li class="ui-state-default" id="12"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
    <li class="ui-state-default" id="13"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
    <li class="ui-state-default" id="14"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 14</li>
  </ul>
</div>
<p>Drag and drop list to reposition...</p>
<button id="btn">Get positions and save them into an array of arrays</button>
<div class="show"></div>

<style>
.sortit { display: flex; flex-direction: row; }
.sortable { display: flex; flex-direction: column; margin: 0; padding: 0; width: 20%; }
.sortable li { margin: 0 3px 3px 3px; padding: 20px; user-select: text; font-size: 2vw; height: 18px; background: gainsboro; list-style-type: none; position: relative; }
.sortable li.editing { background-color: CadetBlue; color: AntiqueWhite; }
.sortable li span { position: absolute; margin-left: -17px; }
</style>

<script>
$(function(e) {
  // Initialize jQuery UI Tooltip
  $(document).tooltip({
    items: ".ui-state-default",
    content: function() {
      return "Global Rank: " + $(this).data("globalRank");
    }
  });

  // Function to update global positions for all items
  function updateGlobalPositions() {
    let globalRank = 1;
    // Iterate through all sortable items across all columns
    $(".sortable li").each(function() {
      $(this).data("globalRank", globalRank);
      // Log to console for debugging
      console.log(`${$(this).text().trim()} - Global Rank: ${globalRank}`);
      globalRank++;
    });
    // Refresh tooltip to show updated rank
    $(document).tooltip("refresh");
  }

  function enableEdit(e) {
    var $this = $(e.target);
    $this.closest(".ui-sortable").enableSelection();
    var cnt = $this.text().trim();
    $this.off("dblclick").addClass("editing");
    var inp = $("<input>", { val: cnt }).css({ width: "60px", marginTop: "-10px" });
    $this.html(inp);
    $this.find("input").focus();
  }

  function prepareEdits(o) {
    o.dblclick(enableEdit);
    $(document).click(clickOff);
    $(".sortit").on("keyup", ".editing > input", function(e) {
      if (e.key === 'Enter' || e.keyCode === 13) {
        $(document).click();
      }
    });
  }

  function disableEdit(o) {
    o.closest(".ui-sortable").disableSelection();
    o.removeClass("editing");
    prepareEdits(o);
    // Update positions after editing in case content changed (optional but clean)
    updateGlobalPositions();
  }

  function clickOff(e) {
    if ($(e.target).hasClass("editing") || $(e.target).parent().hasClass("editing")) {
      return;
    }
    var $this = $(".editing");
    var cnt = $this.find("input").val();
    $this.html("<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>" + cnt);
    disableEdit($this);
  }

  prepareEdits($('.ui-state-default'));

  $(".sortable").sortable({
    connectWith: ".sortable",
    // Trigger position update after drag completes
    update: function() {
      updateGlobalPositions();
    }
  }).disableSelection();

  // Initial position update on page load
  updateGlobalPositions();

  $("#btn").on("click", function() {
    const positions = [];
    let count = 0;
    const length = $(".sortable").length;
    while (count < length) {
      let data = [];
      $(`ul:eq(${count}) li`).each(function() {
        data.push($(this).text().trim());
      });
      positions.push(data);
      count++;
    }
    console.log("Column-wise positions:", positions);
  });
});
</script>

Key Changes Explained #

1. Global Position Tracking:

   • Added updateGlobalPositions() function that iterates through every sortable item across all columns, assigns a sequential global rank (starting at 1), stores it in the element's data attribute, and logs it to the console.
   • This function is called:
     • On page load to set initial ranks
     • After every drag-drop completes (via the Sortable update event)
     • After editing an item to ensure ranks stay in sync

2. Tooltip Integration:

   • Initialized jQuery UI Tooltip to display the global rank when hovering over any item. The tooltip content pulls from the data-globalRank attribute we set.
   • Added position: relative to list items in CSS to ensure the tooltip positions correctly.

3. Code Cleanup:

   • Fixed variable declaration issues (added let/const where missing)
   • Trimmed text values to avoid extra whitespace in logs and position arrays
   • Made selector syntax more consistent (removed unnecessary spaces like $(" .sortable") → $(".sortable"))

Now when you drag items around, you'll see the global rank update instantly in both the tooltip (hover over any item) and the browser console. The rank is calculated dynamically based on the current order of all items, so it doesn't depend on the fixed IDs at all!

内容的提问来源于stack exchange，提问作者user13849624