javascript - jQuery UI可拖动捕捉到容器中

问题说明（Fiddle）：

使用jQuery UI的.draggable()函数，我试图使红色元素对齐到蓝色容器的内部。它首先捕捉到一个边缘，而不是完全捕捉在其内部（即，捕捉到两个边缘）。您必须继续拖动它，直到它捕捉到另一个轴。

当它开始以任何角度捕捉时，我希望它移至最终位置（完全在容器内）。有没有一种方法可以检测快照何时开始（即触发事件），然后使用它手动重新定位红色框？

示例代码：

HTML：

<div id="box"></div>
<div id="container"></div>

JavaScript：

$('#box').draggable({
    snap: '#container',
    snapMode: 'inner',
    snapTolerance: 50
});

CSS：

#box {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 1;
}
#container {
    width: 102px;
    height: 102px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -51px;
    margin-left: -51px;
    border: 1px solid blue;
}

最佳答案

小提琴：http://jsfiddle.net/W8yaz/9/

快照事件帮助：Jquery UI – draggable 'snap' event

现在，在捕捉之后，不再有拖动的可能性。这将是另一个头痛。

另外请注意：您无法触发mouseup来取消拖动事件，这会导致一个已知的javascript错误，可以在前面的小提琴中看到：http://jsfiddle.net/W8yaz/7/

JavaScript：

$('#box').draggable({
    snap: '#container',
    snapMode: 'inner',
    snapTolerance: 50,
    drag: function (event, ui) {
        if ($(this).hasClass('snapped')) {
            var position = $('#container').position();

            $(this).css({
                top: position.top,
                left: position.left
            });
            return false;
        } else {
            var draggable = $(this).data("uiDraggable");
            $.each(draggable.snapElements, function (index, element) {
                if (element.snapping) {
                    draggable._trigger("snapped", event, $.extend({}, ui, {
                        snapElement: $(element.item)
                    }));
                }
            });
        }
    },
    snapped: function (event, ui) {
        $(this).addClass('snapped');
    }
});

关于javascript - jQuery UI可拖动捕捉到容器中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22094578/