为每个拖放块添加工具提示

Question

这是我们拥有的拖放块代码：

$(function(e) {
  function enableEdit(e) {
    var $this = $(e.target);
    $this.closest(".ui-sortable").enableSelection();
    var cnt = $this.text();
    $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);
  }

  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" //use this to connect with other uls
  });
  $(".sortable").disableSelection();

  $("#btn").on("click", function() {
    const positions = [];
    var count = 0;
    //get length of all sortable class
    var length = $(".sortable").length;
    //chck if count is less then length
    while (count < length) {
      //create empty arry
      data = []
      //loop thorugh uls .. li 
      $("ul:eq(" + count + ") li").each(function(index, element) {
        data.push($(this).text()) //push data in array
      });
      positions.push(data) //push datas in outer array
      count++; //increment
    }
    console.log(positions)
  });

});

.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;
}

.sortable li.editing {
  background-color: CadetBlue;
  color: AntiqueWhite;
}

.sortable li span {
  position: absolute;
  margin-left: -17px;
}

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

我想再添加一个功能，但我找不到合适的解决方案。

假设用户按照 he/she 的要求对块进行重新排序，我希望他能够看到一个工具提示，或者只是添加到每个块的控制台日志，其中显示了一个代表块顺序的数字块（我在下图中显示的数字）：

请注意，用户可以再次对块重新排序，我们从更新的块中获得的数字应该更新，因此我们不能简单地为每个块提供一个 ID 并取回该 ID...

Answer 1

在您的 btn click 事件中，您循环遍历所有项目以“导出”它们 - 同时（或在放置时重新创建此循环）您可以应用递增的位置值：

var count = 0;
var pos = 1;
var length = $(".sortable").length;
while (count < length) {
  //loop thorugh uls .. li 
  $("ul:eq(" + count + ") li").each(function(index, element) {
    $(this).prop("title", pos++);
  });
  count++;
}

更新代码段，拖放然后单击按钮更新工具提示

$(function(e) {
  function enableEdit(e) {
    var $this = $(e.target);
    $this.closest(".ui-sortable").enableSelection();
    var cnt = $this.text();
    $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);
  }

  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" //use this to connect with other uls
  });
  $(".sortable").disableSelection();

  $("#btn").on("click", function() {
    const positions = [];
    var count = 0;
    var pos = 1;
    //get length of all sortable class
    var length = $(".sortable").length;
    //chck if count is less then length
    while (count < length) {
      //create empty arry
      data = []
      //loop thorugh uls .. li 
      $("ul:eq(" + count + ") li").each(function(index, element) {
        data.push($(this).text()) //push data in array
        $(this).prop("title", pos++);
      });
      positions.push(data) //push datas in outer array
      count++; //increment
    }
    console.log(positions)
  });

});

.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;
}

.sortable li.editing {
  background-color: CadetBlue;
  color: AntiqueWhite;
}

.sortable li span {
  position: absolute;
  margin-left: -17px;
}

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

Answer 2

如果您只是想将位置反馈给用户，您可以使用 CSS counter 我已将其设置为在 .sortit [=33] 内的每个 <li> 上递增=] 块顺序改变后会自动更新。

所以这只是一些额外的 CSS。其余代码保持不变。

CSS

.sortit {
  display: flex;
  flex-direction: row;
  counter-reset: item;
}

.sortit li::before {
  counter-increment: item;
  content: "Position " counter(item);
  display: block;
  padding: 5px;
  background: floralwhite;
  margin-bottom: 10px;
}

完整代码片段

$(function(e) {
  function enableEdit(e) {
    var $this = $(e.target);
    $this.closest(".ui-sortable").enableSelection();
    var cnt = $this.text();
    $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);
  }

  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" //use this to connect with other uls
  });
  $(".sortable").disableSelection();

  $("#btn").on("click", function() {
    const positions = [];
    var count = 0;
    //get length of all sortable class
    var length = $(".sortable").length;
    //chck if count is less then length
    while (count < length) {
      //create empty arry
      data = []
      //loop thorugh uls .. li 
      $("ul:eq(" + count + ") li").each(function(index, element) {
        data.push($(this).text()) //push data in array
      });
      positions.push(data) //push datas in outer array
      count++; //increment
    }
    console.log(positions)
  });

});

.sortit {
  display: flex;
  flex-direction: row;
  counter-reset: item;
}

.sortit li::before {
  counter-increment: item;
  content: "Position " counter(item);
  display: block;
  padding: 5px;
  background: floralwhite;
  margin-bottom: 10px;
}

.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: auto;
  background: gainsboro;
  list-style-type: none;
}

.sortable li.editing {
  background-color: CadetBlue;
  color: AntiqueWhite;
}

.sortable li span {
  position: absolute;
  margin-left: -17px;
}

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

为每个拖放块添加工具提示

add tooltip to each drag and drop block

html

javascript

css

jquery

jquery-ui

CSS

完整代码片段