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

Posted 2023-05-08

技术标签:

【中文标题】为每个拖放块添加工具提示【英文标题】：add tooltip to each drag and drop block 【发布时间】：2021-01-24 09:11:40 【问题描述】：

这是我们的拖放块代码：

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

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

假设用户按照他/她的需要重新排序块，如下所示，我希望他能够看到工具提示或只是添加到每个块的控制台日志，其中显示代表块顺序的数字（数字我已经在下图中展示了）：

请注意，用户可以再次对块进行重新排序，并且我们通过更新块获得的数量应该更新，因此我们不能简单地为每个块提供一个 id 并取回该 id...

【问题讨论】：

【参考方案1】：

如果您只是想将位置传达给用户，您可以使用CSS counter 我已将其设置为在.sortit div 中的每个<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;

全码sn-p

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

【讨论】：

【参考方案2】：

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

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

更新了sn-p，拖放然后点击按钮更新工具提示

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

【讨论】：

谢谢哇...请纠正我：您刚刚添加了这两行：var pos = 1; 和 $(this).prop("title", pos++); 或者还有其他更改？是的，已添加到您现有的代码中。如果您愿意，您也可以将该部分拉出并应用于 drop 事件。

以上是关于为每个拖放块添加工具提示的主要内容，如果未能解决你的问题，请参考以下文章

将每个字母定位到每个答案容器，但不要添加新的答案容器 - 使用 AngularJs 拖放

如何为 QTextBrowser 中的对象添加工具提示？

编码 mp3 或其他音乐文件

向具有自动宽度的网格单元动态添加工具提示的问题

如何将工具提示添加到 Telerik 树视图

添加reactstrap工具提示会导致TypeError：target.removeEventListener不是函数