Javascript jQueryUI可拖动捕捉到容器中 问题（）的描述：

使用jQueryUI的

.draggable（）

函数，我试图将红色元素捕捉到蓝色容器的内部。它首先捕捉到一条边，而不是完全在其中（即捕捉到两条边）。必须继续拖动它，直到它捕捉到另一个轴

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

示例代码： HTML:

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

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

#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;
}

CSS:

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

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

#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;
}

小提琴：

快照事件帮助：

现在，在抓拍之后，再也没有拖拽的可能了。这将是另一个令人头痛的问题

除此之外，请注意：您不能触发mouseup来取消拖动事件，这会导致已知的javascript错误，可以在前面的提琴中看到：

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');
    }
});

---

我不太确定你在问什么，但你是否尝试过增加捕捉公差？将其拖到蓝色框附近。它将首先捕捉到一条边-垂直或水平。当它开始捕捉时，我希望它立即捕捉到两条边，并最终到达其最终目的地（容器）。不幸的是，我不知道如何更好地描述这个问题。是的，调整公差只会使它从更远的距离捕捉到一个边缘。实际上，它不是捕捉到外部边缘，而是捕捉到相同的“水平”。您可以看到，如果将其从蓝色框中移动约1cm（边缘不接触），您将看到两个底部边缘保持成一条直线。当我慢慢地把它拉近蓝色盒子时，它实际上并没有卡到外缘，至少在我的情况下是这样。谢谢你花时间来做这件事。实际上，我使用了

.droppable（）

，使用了我认为更优雅、更可行的解决方案，但我真的非常感谢您在这里所做的努力。你是冠军，先生。感谢你的赞扬！