jquery拖放 - 可拖放區域有邊框和可拖動項目不會捕捉到此邊框的內部

Question

我使用jQuery拖放功能來創建一個區塊列表加上一個可拖動的小部件，可以在任何瓷磚。

每個瓷磚都有一個邊框，但小工具沒有，所以雖然他們都是相同的大小，但當我將小工具放到瓷磚中時，它會捕捉到瓷磚邊界的左下角。因此瓦片頂部有兩個備用像素。

這裏有一個小提琴 http://jsfiddle.net/gztQM/

和一些代碼：

div[id^="row"] {float:left; width:65px; height:65px; margin:5px;border:1px solid #454545; background-color:#262e41;} 
.bookmark {float:left; width:65px; height:65px; background-color:#edff57;cursor: move;display:block; margin:-1px 0px 0px -1px;} 
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;} 

這裏的可投放區域的例子（磚）

<div class="position" id="row-2col-1"></div> 

可拖動鏈接

<a href class="bookmark"></a> 

的JS

$('.bookmark').draggable({containment: '#content', snap:'.position', snapMode:'inner', revert:'invalid',snapTolerance: 32}); 

$('.position').droppable({drop: handleDropEvent, accept:'.bookmark'}); 
function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
} 

我怎樣才能得到它捕捉到邊框內？我嘗試添加邊距和填充，但無濟於事。在jQuery網站上看不到任何提及此事的任何東西

幫助！ :)

Answer 1

更新：

看來，draggable對象總是捕捉到droppable容器的邊緣，覆蓋的邊界。這似乎沒有像我之前提到的那樣受到box-sizing的影響。這種行爲甚至可以在jQuery UI example中看到。

你最好的賭注是完全刪除邊框，修改了jQuery UI方法的行爲表現，你想要的方式，或包裹你的droppable容器中，div提供保證金和邊框樣式的每一個（和刪除那些來自droppable容器本身）。

jsfiddle (Wrapped Example)

原來的答案：

我認爲這可能與邊境實際影響的箱子內捕捉（snapMode:'inner'）由於盒模型做。

讓您可以通過或者不具有箱子上邊框或通過使用box-sizing: border-box這將改變盒模型的行爲。請記住，在IE8之前的IE版本不支持在沒有polyfill的情況下使用box-sizing。

div[id^="row"] { 
    float:left; 
    width:65px; 
    height:65px; 
    margin:5px; 
    border:1px solid #454545; 
    background-color:#262e41; 
    /* support Firefox, WebKit, Opera and IE8+ */ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

jsfiddle