jquery Drag and Drop - 可放置区域有边框，可拖动项目不会捕捉到该边框的内部

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