javascript - 当拖到一张桌子上时，你怎么知道哪一行被拖到了？

Question

我希望使用 jQuery-UI 的“Draggable”和“Droppable”功能将数据从一个表拖到另一个表中。

我希望能够跟踪哪个单元格被拖入（特别是 X/Y 索引），虽然Thisdroppable 函数返回的对象列出了 a CellIndex，其中包含 Column (X) 值，但我有找到它掉到哪一行（Y）的运气不太好。

我怎么知道我刚刚掉到了哪一行？

JS小提琴链接

Answer 1

我会做以下事情：

• 采用drop event
• 使用$(this)or找到丢弃的对象event.target
• 查找.closest()表行（tr）

• 通过使用将其与表的行进行比较.index()

  $('#mappingChar td').droppable({
      hoverClass: "ui-state-hover",
      drop: function (event, ui) {
          var dropped = $(this),
              droppedRow = dropped.closest('tr');
  
          console.log(droppedRow.index());
      }
  });
  

演示：http: //jsfiddle.net/dirtyd77/XcKdX/3/

希望这会有所帮助，如果您有任何问题，请告诉我！

Answer 2

您可以使用 .index() 或 rowIndex 来找出答案，您的代码中应该这样做：

$('#mappingChar td').droppable(
        {
            hoverClass: "ui-state-hover",
            drop: function( event, ui )
            {
                alert($(this).parent().index()+"\nor\n"+$(this)[0].parentNode.rowIndex);
                console.log('drop successful');
            }
        });