JQuery UI:将长元素拖放到光标位置而不是元素的中间位置

时间:2012-02-10 14:13:47

标签: jquery jquery-ui drag-and-drop jquery-ui-draggable

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

当我开始拖动这种元素悬停我的droppable容器(我的表格的单元格)时,知道元素将被丢弃的“热点”就在它自身的中间位置。

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

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

我真的被困了,我真的很感激任何帮助。

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

由于

2 个答案:

答案 0 :(得分:55)

我认为你要找的是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

答案 1 :(得分:0)

正如James Montagne所说,宽容是你需要的。最重要的是,对于droppable,您可以使用cursorAt。这有助于您相对于光标设置图像(仅在原始图像大于您拖动的克隆时才需要)

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