2012-02-10 64 views
32

我有一些很长的可拖动元素,我可以放入背景表的所有单元格中。JQuery UI:在光标位置删除长元素而不是元素的中间

当我开始拖动这种元素时,将我的可拖放容器(我的表格的单元格)悬停,知道元素将被放置在何处的“热”点就是它自身的中间部分。

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

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

我很困难,我会非常感谢任何帮助。

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

感谢

+0

您可以发布您当前的代码? – 2012-02-10 14:18:18

+0

嗨,这里是一个示例代码来描述我的问题。黄色的div不容易掉入细胞中,因为它太长了。 http://jsbin.com/upunek/edit – sdespont 2012-02-10 14:54:14

回答

54

我想你要寻找的是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

谢谢!这正是我所期待的!我在很长一段时间内通过所有“可拖动”选项进行搜索,但没有“可丢弃”选项......这使我的一天^ _^ – sdespont 2012-02-10 15:05:33

+1

帮助我,谢谢。 +1 – Mike 2014-06-27 20:05:50

0

正如詹姆斯·蒙塔涅提到的,宽容是你所需要的这一点。最重要的是,对于droppable,你可以使用cursorAt。这可以帮助您相对于光标图像设置(只需要您的原始图像比你拖动克隆更大)

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