javascript - 将鼠标悬停在列表项上时获取表格行的 ID

Question

我有 jQuery 可排序列表和表格。我想从列表中拖动一项并将其悬停在该行上以使用 ID 比较它们的值，因此如果列表项的值与悬停行上的值相同，则删除列表项；如果值不同，则将此列表项放回到列表中。

如何获取所选列表项的 ID 以及我将此项目悬停到的行？

这是我到目前为止所得到的:

$(function() {
  var $dropfalse = $("tr.dropfalse"),
      itemId,
      isvalid = false;
  $("ul.droptrue").sortable({
    connectWith: "ul",
    start: function(event, ui) {
      $dropfalse.removeClass("disabled");
      itemId = ui.item.attr("id"); // Get id of source item
    },
    stop: function(){
      $dropfalse.addClass("disabled");
    }
  });
  
  $("tr.dropfalse").sortable({
    connectWith: "tr",
    dropOnEmpty: false,
    cancel:".disabled",
    receive: function(event, ui) {
      console.log(isvalid);
      if(!isvalid){
        $(ui.sender).sortable('cancel');
        isvalid = false;
      }
    }
  });
  
  $("#sortable1, #sortable2").disableSelection();
  $dropfalse.addClass("disabled");
  
  $('#sortable2 .dropfalse').droppable({
    over: function(){
      console.log(itemId, $(this).attr("id"));
      isvalid = true;
    }
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<ul id="sortable1" class="droptrue">
  <li id="test1" class="ui-state-default"><label>Item 1</label></li>
  <li id="test2" class="ui-state-default"><label>Item 2</label></li>
  <li id="test3" class="ui-state-default"><label>Item 3</label></li>
</ul>

<table id="sortable2" class="disabled">
  <tr id="test4" class="dropfalse"><td class="ui-state-highlight">Item 4</td></tr>
  <tr id="test5" class="dropfalse"><td class="ui-state-highlight">Item 5</td></tr>
  <tr id="test6" class="dropfalse"><td class="ui-state-highlight">Item 6</td></tr>
</table>

Answer 1

通过此代码，您可以获取元素的 id 属性。

1. 确保为要放入的元素设置“容差”选项，
2. 我删除了“over”方法的实现，并将更改添加到“dropover”事件处理程序中。据我了解，jQuery UI 文档是这样解释需要完成此操作的。

$(function() {
    var $dropfalse = $("tr.dropfalse"),
        itemId,
        isvalid = false;
    $("ul.droptrue").sortable({
        connectWith: "ul",
        start: function(event, ui) {
          $dropfalse.removeClass("disabled");
          itemId = ui.item.attr("id"); // Get id of source item
        },
      stop: function(){
          $dropfalse.addClass("disabled");
      }
  });
  
  $("tr.dropfalse").sortable({
      connectWith: "tr",
      dropOnEmpty: false,
      cancel:".disabled",
      receive: function(event, ui) {
          console.log(isvalid);
          if(!isvalid){
            $(ui.sender).sortable('cancel');
            isvalid = false;
          }
      }
  });
  
  $("#sortable1, #sortable2").disableSelection();
  $dropfalse.addClass("disabled");
  
  $('#sortable2 .dropfalse').droppable({
      tolerance: "pointer",
      over: function(){ }
  });
  
  $('#sortable2 .dropfalse').on('dropover', function(event, ui) {
      console.log("table id: " + $(this).attr("id"));
      console.log("list id: " + $(ui.draggable).attr("id"));
  });
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<ul id="sortable1" class="droptrue">
  <li id="test1" class="ui-state-default"><label>Item 1</label></li>
  <li id="test2" class="ui-state-default"><label>Item 2</label></li>
  <li id="test3" class="ui-state-default"><label>Item 3</label></li>
</ul>

<table id="sortable2" class="disabled">
  <tr id="test4" class="dropfalse"><td class="ui-state-highlight">Item 4</td></tr>
  <tr id="test5" class="dropfalse"><td class="ui-state-highlight">Item 5</td></tr>
  <tr id="test6" class="dropfalse"><td class="ui-state-highlight">Item 6</td></tr>
</table>