Question

jsfiddle link。
我希望在mousedown上触发#flyingDiv事件时，#holder移动它mouseup，当#holer和鼠标离开#flyingDiv时，我无法移动#holder移动它。在我的代码中，当我将鼠标移动到<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>的中心时，有时$(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"); } } }); });位于黑色边框附近 HTML：

event.eventPhase == 3

Javascript：

{{1}}

UPD
我发现，如果{{1}}它是旧事件。 Link
但仍然代码工作速度不快。

Answer 1

我可以在Chrome上复制问题，这似乎是一个性能问题;一个鼠标移动事件非常快速地启动，并且对每个事件执行DOM查询和写入都会在某些点阻塞较慢的客户端，其中样式将不会获得顶部和左侧几帧的值，并且它将默认为0。

您可能希望查看预制的优化解决方案，例如jQuery draggable，因为您已经在使用jQuery。

Answer 2

不要使用bind，请使用$（element）.mousedown（）。mouseup（）

可能是这样的...... http://jsfiddle.net/KQpe9/

    $(function() {
    $('.slider').slider();
});

$.fn.slider = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css('top', 0);
        var dragging = false;
        var startY = 0;
        var startT = 0;
        $el.mousedown(function(ev) {
            dragging = true;
            startY = ev.clientY;
            startT = $el.css('top');
        });
        $(window).mousemove(function(ev) {
            if (dragging) {
                // calculate new top
                var newTop = parseInt(startT) + (ev.clientY - startY);

                //stay in parent
                var maxTop =  $el.parent().height()-$el.height();          
                newTop = newTop<0?0:newTop>maxTop?maxTop:newTop;
                $el.css('top', newTop );
            }
        }).mouseup(function() {
            dragging = false;
        });
    });
}

将div飞入另一个div

2 个答案: