Получить идентификатор строки таблицы при наведении на элемент списка

1 Deniss Muntjans [2017-05-23 00:25:00]

У меня есть отсортированный список и таблица jQuery. Я хотел бы перетащить один элемент из списка и навести его на строку, чтобы сравнить их значения с помощью идентификаторов, поэтому, если значение элемента списка и значение в зависающей строке совпадают, то удалите элемент списка; если значения разные, верните этот список в список.

Как получить идентификатор выбранного элемента списка и строку, на которую я курсирую этот элемент?

Это то, что у меня есть до сих пор:

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

javascript jquery html

Оригинал вопроса (на английском)

1 Решение rolspace [2017-05-23 01:43:00]

С помощью этого кода вы можете получить атрибуты id элементов.

Не забудьте установить параметр "Допуск" на элементы, которые вы хотите вставить,
Я удалил вашу реализацию метода "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>

Оригинал ответа (на английском)

Получить идентификатор строки таблицы при наведении на элемент списка

1 ответ