Question

我正在使用jQuery拖放来创建一个tile列表以及一个可拖放的窗口小部件，可以放在任何一个tile中。

每个图块都有边框，但小部件没有，所以尽管它们都是相同的大小，但当我将小部件放入图块时，它会捕捉到图块边框的左下角。因此，瓷砖顶部有两个像素备用。

和一些代码：

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

jquery拖放 - 可放置区域有边框，可拖动项目不会捕捉到此边框内部

1 个答案: