JavaScript 지연 div 지연

Question

div를 드래그 할 때 아래 함수를 사용할 때 문제가 발생합니다. div의 일부 내용 (예 : 이미지 및 텍스트 블록)을 div로 드래그 할 때 지연됩니다.

이상한 부분이 지연이 .. 왼쪽에서 오른쪽으로 만 위에서 아래로 드래그 할 때 발생되지

모든 아이디어를 어떻게이 기능의 수직 지연을 제거하는 것입니다?

function enableDragging(ele) { 
    var dragging = dragging || false, 
     x, y, Ox, Oy, 
     current; 
    enableDragging.z = enableDragging.z || 1; 
    var grabber = document.getElementById("wrapper"); 
    grabber.onmousedown = function (ev) { 
     ev = ev || window.event; 
     var target = ev.target || ev.srcElement; 
     current = target.parentNode; 
     dragging = true; 
     x = ev.clientX + 2; 
     y = ev.clientY + 2; 
     Ox = current.offsetLeft; 
     Oy = current.offsetTop; 
     current.style.zIndex = ++enableDragging.z; 

     document.onmousemove = function (ev) { 
      ev = ev || window.event; 
      if (dragging == true) { 
       var Sx = parseFloat(ev.clientX) - x + Ox; 
       var Sy = parseFloat(ev.clientY) - y + Oy; 
       current.style.left = Math.min(Math.max(Sx, Math.min(viewport().width - Sx, 0)), viewport().width - current.offsetWidth) + "px"; 

       current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewport().height - current.offsetHeight) + "px"; 
      } 
     } 

     document.onselectstart = function() { 
      return false; 
     }; 

     document.onmouseup = function (ev) { 
      ev = ev || window.event; 
      dragging && (dragging = false); 
      if (ev.preventDefault) { 
       ev.preventDefault(); 
      } 
     } 

     document.body.style.MozUserSelect = "none"; 
     document.body.style.cursor = "default"; 

     return false; 
    }; 
} 

function viewport() { 
    var e = window 
    , a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] } 
} 

Answer 1

나는 바이올린을 넣고 여기에 데모를 만들 수 있습니다. http://jsfiddle.net/N6A4q/ (나는 var grabber = ele; 테스트

처리하도록 수정했습니다 기록하고 난 느린 동작 CSS의 위치에 따라 통지 않습니다.
은 아마도 문제는 값을 캐싱과 같은 몇 가지 최적화를해야 할 수도 있습니다

예를를 들면 다음과 같습니다.
C urrent.style.top = Math.min (Math.max (Sx, Math.min (viewport(). height - Sx, 0), viewport(). height - current.offsetWidth) + "px";

)는 (

VAR viewportHeight = viewport.height 개선 할 수 있었다;
current.style.top = Math.min (Math.max (Sy, Math.min (viewportHeight - Sy, 0)), viewportHeight - current.offsetHeight) + "px";

는 예를 들어, 설정하고 (빠른 연속 스타일을 얻을 수있는 나쁜 생각입니다 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

링크 조언 :

다음 브라우저 다시 그리기/흐름에 좋은 읽기입니다 루프에서) :

// 아니요!
el.style.left = el.offsetLeft + 10 + "px";

간단히 읽기 및 쓰기가 간단하기 때문에.