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:&nbsp;//jsfiddle.net/Twisty/r8h0asL3/4/JavaScript$(function() {&nbsp; for (var i = 1; i < 11; i++) {&nbsp; &nbsp; $('tbody').append('<tr><td id="a-' + i + '""></td><td&nbsp; id="b-' + i + '""></td></tr>');&nbsp; }&nbsp; $('.dragDiv').draggable({&nbsp; &nbsp; containment: $("tbody"),&nbsp; &nbsp; snap: 'td',&nbsp; &nbsp; snapMode: 'inner',&nbsp; &nbsp; snapTolerance: "15"&nbsp; });&nbsp; $('tbody td').droppable({&nbsp; &nbsp; accept: '.dragDiv',&nbsp; &nbsp; drop: function(event, ui) {&nbsp; &nbsp; &nbsp; ui.draggable.css({&nbsp; &nbsp; &nbsp; &nbsp; top: "",&nbsp; &nbsp; &nbsp; &nbsp; left: ""&nbsp; &nbsp; &nbsp; }).appendTo(this);&nbsp; &nbsp; }&nbsp; });});您可以在这里看到snap您尝试的方法是正确的。我添加了containment这样用户就无法将其拖出计划。对于drop，我们需要删除位置样式，然后将其附加到放置目标。展望未来，您可能会考虑将 DIV 浮动在表格上。通过这种方式，它可以“覆盖”时间范围，而不是作为单元格内的元素。