jQuery 用户界面 : Drop long element at the cursor location instead of the middle of the element

Question

我有一些很长的可拖动元素，可以将它们放入背景表格的所有单元格中。

当我开始拖动此类元素悬停在可放置容器(表格的单元格)上时，了解元素将被放置到何处的“热点”点是其自身的中间。

不幸的是，我的元素的中间通常不可见，并且将元素放在正确的位置是没有用的。

是否可以指定光标位置来选择将元素放置在哪个容器中而不是元素的中间？

我真的陷入困境，我将非常感谢任何帮助。

嗨，这是一个示例代码来描述我的问题。黄色 div 不能轻易落入单元格中，因为它太长了。 jsbin.com/upunek/edit

谢谢

Answer 1

我认为您正在寻找的是宽容。我可能建议使用“指针”，因为这将使用鼠标光标作为“重叠”点。

http://jqueryui.com/demos/droppable/

$('[id^="cell-"]').each(function(index) {
  $(this).droppable({
  accept: ".cartridge",
  hoverClass: "cell-highlght",
    tolerance: "pointer",
  drop: function( event, ui ) {
    $( this ).addClass( "cell-dropped" );
  }
  });
}); 

http://jsbin.com/upunek/2/edit