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