jQuery UI：设置可拖动元素的放置位置

Question

在拖放使用jQuery UI实现的可拖动项目时，是否有办法定义可拖动项目的哪一部分用于确定放置目标的位置/元素？

例如我在由100x25单元格组成的表格中移动了100x100 div。现在，目标单元格似乎由助手div的中心确定。我希望目标单元格成为div顶部的单元格。
这是一个日历视图，其中表的列是天，行是时间。 div代表一个事件，它的高度可以根据事件的长度而变化。重要的是，在拖动事件时，用户知道事件将在何处下降，以使时间正确。当前，如果用户放弃一个2小时的事件，以使最高时间为08:00，则目标单元格将最终成为09:00的事件。
在拖动视觉帮助元素以帮助定位时，我可以将其缩小，但我希望将其保留为全尺寸。

视觉辅助（代表事件的黑框）：

我当前的实现方式：

$(this).draggable({snap: 'td.dropTd', snapTolerance: "10"})

编辑： 这是一个代码示例。控制台将打印出放置元素的单元格。 https://jsfiddle.net/akrzpvb2/2/

Answer 1

请考虑以下代码。

示例：https://jsfiddle.net/Twisty/r8h0asL3/4/

JavaScript

$(function() {
  for (var i = 1; i < 11; i++) {
    $('tbody').append('<tr><td id="a-' + i + '""></td><td  id="b-' + i + '""></td></tr>');
  }

  $('.dragDiv').draggable({
    containment: $("tbody"),
    snap: 'td',
    snapMode: 'inner',
    snapTolerance: "15"
  });
  $('tbody td').droppable({
    accept: '.dragDiv',
    drop: function(event, ui) {
      ui.draggable.css({
        top: "",
        left: ""
      }).appendTo(this);
    }
  });
});

您可以在此处看到您尝试的snap方法在正确的路径上。我添加了containment，以使用户无法将其拖出时间表。

对于drop，我们需要删除位置样式，然后将其附加到放置目标。

继续前进，您可以考虑将DIV浮动在桌子上。这样，它可以“覆盖”时间范围，而不是成为单元格中的元素。