JQuery UI：将长元素放在光标位置而不是元素的中间

Posted 2023-05-08

【中文标题】JQuery UI：将长元素放在光标位置而不是元素的中间

【英文标题】：JQuery UI : Drop long element at the cursor location instead of the middle of the element

【发布时间】：2012-03-03 00:00:28

【问题描述】：

我有一些非常长的可拖动元素，可以放入背景表格的所有单元格中。

当我开始将这种元素悬停在我的可放置容器（我的表格的单元格）时，知道元素将被放置在哪里的“热点”是它自身的中间。

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

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

我真的被困住了，我将非常感谢任何帮助。

您好，这是描述我的问题的示例代码。黄色的 div 太长了，不能轻易放入单元格中。 jsbin.com/upunek/edit

谢谢

【问题讨论】：

你能发布你当前的代码吗？

您好，这是描述我的问题的示例代码。黄色的 div 太长了，不能轻易放入单元格中。 jsbin.com/upunek/edit

【参考方案1】：

我认为您正在寻找的是tolerance。我可能会建议使用"pointer"，因为这会将鼠标光标用作您的“重叠”点。

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

【讨论】：

谢谢！这正是我想要的！我在很长一段时间内搜索了所有“可拖动”选项，但没有“可拖放”选项......这让我很开心^_^

【参考方案2】：

正如 James Montagne 所提到的，为此您需要的是宽容。最重要的是，对于 droppable，您可以使用 cursorAt。这有助于您相对于光标设置图像（仅当您的原始图像大于您拖动的克隆时才需要）

http://api.jqueryui.com/draggable/#option-cursorAt