将鼠标悬停在列表项

Question

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

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

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

＆＃13;

＆＃13;

$(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;
    }
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

1. 确保设置＆＃34;容差＆＃34;您想要放入的元素的选项，
2. 我删除了＆＃34; over＆＃34;方法，并将更改添加到＆＃34; dropover＆＃34;事件处理程序据我所知，这是jQuery UI文档解释这需要完成的方式。
＆＃13;
＆＃13;
$(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"));
  });
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;