JQuery UI：在游标位置上放置长元素，而不是元素的中间 [英] JQuery UI : Drop long element at the cursor location instead of the middle of the element

问题描述

当我开始拖动这种元素时，我可以拖放我的可放置容器（我的桌子的细胞），热点，知道元素将被丢弃的位置是它的本身。

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

是否可以指定光标位置来选择要在其中放置元素的容器元素的中间？

我真的很困惑，我真的很感激任何帮助。

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

谢谢

解决方案

我想你正在寻找的是 tolerance 。我可能建议使用pointer，因为这将使用鼠标光标作为重叠点。

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

$ b每个（function（index）{
$（this）.droppable（{$ b（$（$））$ {pre> $（'[id ^ =cell - ] $ b accept：.cartridge，
hoverClass：cell-highlght，
tolerance：pointer，
drop：function（event，ui）{
$这个）.addClass（cell-drop）;
}
}）;
}）;


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

I have some very long draggable elements that I can drop in all cells of a background table.

When I start dragging this kind of element hover my droppable containers (the cells of my table), the "hot" point to know where the element will be dropped is the middle of itself.

Unfortunately, the middle of my element is often not visible and it is not useful to drop the element in the right place.

Is it possible to specify the cursor position to choose in which container the element will be drop instead the middle of the elements?

I am really stuck and I will really appreciate any help.

Hi, here is a sample code to depict my problem. The yellow div cannot easily drop into the cells because it is too long. jsbin.com/upunek/edit

Thanks

解决方案

I think what you're looking for is tolerance. I would probably suggest using "pointer" as this will use the mouse cursor as your "overlap" point.

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

这篇关于JQuery UI：在游标位置上放置长元素，而不是元素的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！