Semplice codice drag and drop

Sto lottando con apparentemente un semplice esercizio javascript, scrivendo un trascinamento della selezione. Penso Im commettendo un errore con i miei 'addeventlisteners', ecco il codice:Semplice codice drag and drop

var ele = document.getElementsByClassName ("target")[0]; 
var stateMouseDown = false; 
//ele.onmousedown = eleMouseDown; 
ele.addEventListener ("onmousedown" , eleMouseDown , false); 

function eleMouseDown() { 
    stateMouseDown = true; 
    document.addEventListener ("onmousemove" , eleMouseMove , false); 
} 

function eleMouseMove (ev) { 
    do { 
     var pX = ev.pageX; 
     var pY = ev.pageY; 
     ele.style.left = pX + "px"; 
     ele.style.top = pY + "px"; 
     document.addEventListener ("onmouseup" , eleMouseUp , false); 
    } while (stateMouseDown === true); 
} 

function eleMouseUp() { 
    stateMouseDown = false; 
    document.removeEventListener ("onmousemove" , eleMouseMove , false); 
    document.removeEventListener ("onmouseup" , eleMouseUp , false); 
}

fonte

2013-08-25 Kayote

Ecco un jsfiddle con tale organizzazione: http://jsfiddle.net/fpb7j/1/

C'erano 2 questioni principali, prima di essere l'uso di onmousedown, onmousemove e onmouseup. Credo che questi sono solo per essere utilizzato con gli eventi collegati:

document.body.attachEvent('onmousemove',drag);

mentre mousedown, mousemove e mouseup sono per gli ascoltatori di eventi:

document.body.addEventListener('mousemove',drag);

Il secondo problema era la do-while in caso mossa funzione. Tale funzione di essere chiamato ogni volta che il mouse si sposta di un pixel, in modo che il ciclo non è necessaria:

var ele = document.getElementsByClassName ("target")[0]; 
ele.addEventListener ("mousedown" , eleMouseDown , false); 

function eleMouseDown() { 
    stateMouseDown = true; 
    document.addEventListener ("mousemove" , eleMouseMove , false); 
} 

function eleMouseMove (ev) { 
    var pX = ev.pageX; 
    var pY = ev.pageY; 
    ele.style.left = pX + "px"; 
    ele.style.top = pY + "px"; 
    document.addEventListener ("mouseup" , eleMouseUp , false); 
} 

function eleMouseUp() { 
    document.removeEventListener ("mousemove" , eleMouseMove , false); 
    document.removeEventListener ("mouseup" , eleMouseUp , false); 
}

A proposito, ho dovuto fare la posizione del bersaglio in assoluto per farlo funzionare.

fonte

2013-08-25 02:58:13 iRector

Grazie per la risposta dettagliata. Stavo usando Do While per mousemove mentre il mouse è attivo, altrimenti non dovrebbe essere eseguito ... se abilito il ciclo Do While, Firefox si ferma comunque. – Kayote

@Kayote Ho capito, anche se non sarà necessario a causa di quanto spesso l'evento 'mousemove' chiama' eleMouseMove() ' – iRector

L'ho aggiornato un po 'per il mio requisito. Può essere utile anche per gli altri, quindi http://jsfiddle.net/kjwLe9bq/ sharing. – Savaratkar

si può provare questo violino troppo, http://jsfiddle.net/dennisbot/4AH5Z/

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>titulo de mi pagina</title> 
<style> 
    #target { 
     width: 100px; 
     height: 100px; 
     background-color: #ffc; 
     border: 2px solid blue; 
     position: absolute; 
    } 
</style> 
<script> 
    window.onload = function() { 
     var el = document.getElementById('target'); 
     var mover = false, x, y, posx, posy, first = true; 
     el.onmousedown = function() { 
      mover = true; 
     }; 
     el.onmouseup = function() { 
      mover = false; 
      first = true; 
     }; 
     el.onmousemove = function(e) { 
      if (mover) { 
       if (first) { 
        x = e.offsetX; 
        y = e.offsetY; 
        first = false; 
       } 
       posx = e.pageX - x; 
       posy = e.pageY - y; 
       this.style.left = posx + 'px'; 
       this.style.top = posy + 'px'; 
      } 
     }; 
    } 
</script> 
</head> 
<body> 
    <div id="target" style="left: 10px; top:20px"></div> 
</body> 
</html>

fonte

2014-02-11 06:30:29 dennisbot

Perché usi offsetX/Y? –

Per interrompere il salto trascinabile verso il puntatore del mouse. Capisco. –

Ho appena fatto un semplice drag.

Si tratta di un uso uno di linea, e gestisce le cose come l'offset del mouse nell'angolo in alto a sinistra dell'elemento, onDrag/onStop callback, e gli elementi SVG trascinando

Ecco il codice.

// simple drag 
function sdrag(onDrag, onStop) { 
    var startX = 0; 
    var startY = 0; 
    var el = this; 
    var dragging = false; 

    function move(e) { 
     el.style.left = (e.pageX - startX) + 'px'; 
     el.style.top = (e.pageY - startY) + 'px'; 
     onDrag && onDrag(el, e.pageX, startX, e.pageY, startY); 
    } 

    function startDragging(e) { 
     if (e.currentTarget instanceof HTMLElement || e.currentTarget instanceof SVGElement) { 
      dragging = true; 
      var left = el.style.left ? parseInt(el.style.left) : 0; 
      var top = el.style.top ? parseInt(el.style.top) : 0; 
      startX = e.pageX - left; 
      startY = e.pageY - top; 
      window.addEventListener('mousemove', move); 
     } 
     else { 
      throw new Error("Your target must be an html element"); 
     } 
    } 

    this.addEventListener('mousedown', startDragging); 
    window.addEventListener('mouseup', function (e) { 
     if (true === dragging) { 
      dragging = false; 
      window.removeEventListener('mousemove', move); 
      onStop && onStop(el, e.pageX, startX, e.pageY, startY); 
     } 
    }); 
} 

Element.prototype.sdrag = sdrag;

e di utilizzarlo:

document.getElementById('my_target').sdrag();

È inoltre possibile utilizzare onDrag e callback OnStop:

document.getElementById('my_target').sdrag(onDrag, onStop);

Controllare il mio repo qui per maggiori dettagli: https://github.com/lingtalfi/simpledrag

fonte

2016-09-02 19:12:34 ling

Semplice codice drag and drop

risposta

Problemi correlati