0

我正在使用 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 网站上也看不到任何提及此内容的内容

帮助！:)

4

1 回答 1

1

更新：

看起来draggable对象总是捕捉到droppable容器的边缘，覆盖边界。box-sizing正如我之前提到的，这似乎没有受到影响。这种行为甚至可以在jQuery UI 示例中看到。

您最好的选择是完全删除边框，修改 jQuery UI 方法的行为以按照您想要的方式运行，或者将每个droppable容器包装在div提供边距和边框样式的容器中（并从droppable容器本身中删除它们） .

jsfiddle（包装示例）

原答案：

我相信这可能与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

于 2013-02-13T12:27:31.067 回答