2012-02-10 90 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