jQueryUI Draggable - 网格和包含选项

Question

问题是：当设置网格和包含选项时，拖动事件会出现问题。 某些物体（根据它们的起始位置）不能完全接近容器的边缘。有办法解决这个问题吗？ （不改变事件拖动？）

HTML

<div id="container">
    <div id="obj1"></div>
    <div id="obj2"></div>
</div>

JS

$("#obj1,#obj2").draggable({
    containment : "parent",
    grid : [3,3]
});

CSS

#container{
    width:400px;
    height:400px;
    border:1px solid red;
}

#obj1{
    position:absolute;
    width:53px;
    height:53px;
    background:blue;
    left:27px;
    top:27px;
}
#obj2{
    position:absolute;
    width:53px;
    height:53px;
    background:red;
    left:53px;
    top:103px;
}

Example on JSFiddle （obj1没问题，obj2（在这种情况下）是不是没有）

Answer 1

您已将网格设置为[3,3]，这意味着jQuery将以3像素的方式递增/递减对象的位置。因此，如果希望对象能够达到[0,0]，则需要在网格上对齐起始位置：

#obj2{
    position:absolute;
    width:53px;
    height:53px;
    background:red;
    left:54px;
    top:105px;
}

请参阅http://jsfiddle.net/9oLtt9uy/2/

<强>更新

如果您的起始坐标是可变的，则应动态调整它们，以便它们对齐，例如：

var gridSpacing = 10,
    gridSize = $("#obj1").width();

// make sure the grid is big enough to fit an exact number of objects
$("#container").width(gridSpacing * gridSize + 2);
$("#container").height(gridSpacing * gridSize + 2);

// align each object and make it draggable    
$("#obj1,#obj2").each(function() {
    $(this).css({
        "left": ($(this).position().left - ($(this).position().left % gridSpacing) - 1),
        "top": ($(this).position().top - ($(this).position().top % gridSpacing) - 1)
    });

    $(this).draggable({
        containment : "parent",
        grid : [gridSpacing,gridSpacing]
    });
});

请参阅http://jsfiddle.net/9oLtt9uy/6/