4

jsfiddle 链接。
我希望当mousedown事件触发时#flyingDiv我可以将它移动到 a 周围#holder，当mouseup鼠标离开时#holer我无法移动它。在我的代码#flyingDiv中，当我将鼠标移到#holder.
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它是旧事件。链接
但是代码仍然运行不快。

4

2 回答 2

2

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

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

于 2013-08-07T11:30:34.480 回答
1

不要使用绑定，使用 $(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;
        });
    });
}
于 2013-08-07T11:36:46.660 回答