将div分隔为另一个格

Question

jsfiddle link。
我想当mousedown事件触发#flyingDiv我可以移动它围绕#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这是旧的事件。 Link
但仍然代码工作不快。

Answer 1

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

由于您已经在使用jQuery，因此您可能需要查看预制的优化解决方案，如jQuery draggable。

Answer 2

不使用绑定，使用$（元素）.mousedown（）。鼠标松开（）

也许这样的事情... 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; 
     }); 
    }); 
}