拖慢速度？

Question

我使用下面的函數來拖動一個div：

function enableDragging(ele, ell) { 
    var dragging = dragging || false, 
     x, y, Ox, Oy, 
     current; 
    enableDragging.z = enableDragging.z || 1; 
    var grabber = document.getElementById(ell); 
    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; 

     var viewportWidth = viewport().width; 
     var viewportHeight = viewport().height; 
     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)), viewportWidth - current.offsetWidth) + "px"; 

       current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewportHeight - 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' ] } 
} 

我這是怎麼開始的阻力：

 var ele = document.getElementById("snapifyWrapper"); 
     enableDragging(ele, 'hndl'); 

我試着去弄清楚如何我可以拖動慢？基本上我想在這股利被拖動

Answer 1

在你document.onmousemove()功能速度放慢，也許檢查Sx和Sy移動current對象之前有足夠的不同x和y？

因此，指定一個閾值並與移動對象之前進行比較。

// need to have displacement of 10px before moving the object 
var threshold = 10; 
var getAbs = Math.abs; // local reference to Math.abs() function 
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; 

     if (getAbs(Sx) > threshold || getAabs(Sy) > threshold) { 
      // move it  
      current.style.left = Math.min(Math.max(Sx, Math.min(viewport().width - Sx, 0)), viewportWidth - current.offsetWidth) + "px"; 
      current.style.top = Math.min(Math.max(Sy, Math.min(viewport().height - Sy, 0)), viewportHeight - current.offsetHeight) + "px"; 
     } 
    } 
} 

您還可以添加一個timer指定多久以前鼠標移動應記錄的座標。