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 浮动在桌子上。通过这种方式，它可以“覆盖”时间框架，而不是成为单元格内的元素。