为什么我的draggable snapType：inner，snap to outer？

Question

我的拖拉机出现了一个奇怪的问题。请参见JSFiddle：http://jsfiddle.net/c6L9rLxt/1/

我的代码是：

$('.element').draggable({
    appendTo: "body",
    snap: ".x-guide, .y-guide",
    snapMode: "inner",
    stop: function(event, ui) {
        $('.x-guide').css("top", $('.element').css("top"));
        $('.y-guide').css("left", $('.element').css("left"));
    }
});

所以我想要发生的事情是，我希望我的拖动能够捕捉到.x-guide和.y-guide的内部。它成功完成，但如果拖到.x-guide或.y-guide附近，它也会捕捉到父div。

了解我的意思的最好方法是亲自尝试。转到JSFiddle，将元素拖动到中心位置。然后尝试将元素拖动到任何红线的外部。您将看到它捕捉到.container div的边界。请注意，这仅在您接近红线时才会发生。它不会发生在.container div的边界上的任何地方。

见图片：

编辑：有人写了一个答案建议使用Drag函数而不是Stop函数。它没有帮助，可拖动的元素仍然对齐容器的边缘。唯一的区别是红线也会移动。但容器的按扣仍然存在。那位作者删除了答案。

Answer 1

发生这种情况的原因是因为snapMode: "inner"并不意味着它会捕捉到div的中心。它捕捉到div的角落。你可以在这里看到以非常明显的方式显示它的例子： http://jsfiddle.net/CbESD/3/

（尝试将红色框放在灰色框的中央。你会发现它是不可能的，它会卡在两边）。

因此，在上述问题中，snap-div为width: 100%或height: 100%。 droppable / draggable将捕捉到它的内部边框，就像在这个答案中的jsfiddle一样。

似乎无法禁用此行为。如果有人知道如何不让它与snap-div的侧面对齐，我很乐意学习它。但是从我的所有研究和测试中，它只是它的行为方式。