javascript - 将 div 飞入另一个 div

Question

jsfiddle link .
我想当 #flyingDiv 触发 mousedown 事件时，我可以将它移动到 #holder 周围，当 mouseup鼠标离开 #holer 我无法移动它。在我的代码中，当我将鼠标移动到 #holder 的中心时，有时 #flyingDiv 位于黑色边框附近。
HTML:

<div id="holder" style="position: relative; margin: 20px auto; border: 1px solid black; width: 400px !important; height: 400px !important;">
    <div id="flyingDiv" style="position: absolute; background-color: green; width: 10px !important; height: 10px !important; left: 195px; top: 195px;"></div>
</div>  

Javascript:

$(function(){
    var fd = $("#flyingDiv");
    $("#flyingDiv").bind("mousedown", function(event) {
        $(this).attr("pressed", true);
    });
    $("#holder").bind("mouseup", function(event) {
        $("#flyingDiv").removeAttr("pressed");
    });
    $("#holder").bind("mousemove", function(event) {
        var div = $("#flyingDiv");
        if (div.attr("pressed")) {
            var width = div.width();
            if (event.offsetX >= width / 2 && ($(this).width() - event.offsetX) >= width / 2) {
                div.css("left", parseInt(event.offsetX - width / 2) + "px");
            }
            var height = div.height();
            if (event.offsetY >= height / 2 && ($(this).height() - event.offsetY) >= width / 2) {
                div.css("top", parseInt(event.offsetY - height / 2) + "px");
            }
        }
    });
});  

UPD
我发现如果 event.eventPhase == 3 它是旧事件。 Link
但代码运行速度仍然不快。

Answer 1

我可以在 Chrome 上复制这个问题，这似乎是一个性能问题；鼠标移动事件会非常迅速地触发，并且在每个事件上同时进行 DOM 查询和写入会在某些时候阻塞较慢的客户端，其中样式不会在几帧内获得 top 和 left 的值，并且它将默认为 0。

您可能想要研究预制的优化解决方案，例如 jQuery draggable ，因为您已经在使用 jQuery。