Ralentir la vitesse d'entraînement?

Question

J'utilise la fonction suivante pour faire glisser un 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' ] } 
} 

Voici comment je commence la glisser:

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

Im essayant de comprendre comment je peux faire glisser le plus lent? Fondamentalement, je veux ralentir la vitesse à laquelle le div est traîné

Answer 1

Dans votre fonction document.onmousemove(), peut-être vérifier que Sx et Sy sont assez différents de x et y avant de déplacer l'objet current?

Spécifiez donc un seuil et comparez-le avec celui-ci avant de déplacer l'objet.

// 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"; 
     } 
    } 
} 

Vous pouvez également ajouter un timer pour indiquer combien de temps avant mousemove enregistrer les coordonnées devraient. Peut-on voir un exemple de ceci dans un [jsfiddle] (http://jsfiddle.net/)?