Flying div в другой 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 draggable, так как вы уже используете jQuery.

Answer 2

не используют привязку, используйте $ (элемент) .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; 
     }); 
    }); 
}