Come trascinare un'immagine senza problemi sullo schermo utilizzando puro javascript

Sto provando a utilizzare JavaScript per trascinare un'immagine sullo schermo. Ho già scritto uno script che funziona bene su div con testo, ma quando lo uso su un'immagine funziona molto a intermittenza.Come trascinare un'immagine senza problemi sullo schermo utilizzando puro javascript

Ho messo il mio codice su jsfiddle in modo che altri possano vedere cosa intendo. http://jsfiddle.net/laurence/YNMEX/

Se lo si esegue, si scoprirà che il blocco di testo può essere trascinato e rilasciato, ma quando si tenta la stessa cosa con l'immagine, lascia l'immagine dietro. È come se l'immagine non riuscisse a stare al passo con il movimento del mouse.

ho ripetuto il codice a jsfiddle di seguito:

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Drag and drop</title> 
<style type="text/css"> 

    .dragme { 
     position:relative; 
     width: 270px; 
     height: 203px; 
     cursor: move; 
    } 
    #draggable { 
     background-color: #ccc; 
     border: 1px solid #000; 
    } 
</style> 
<script type="text/javascript"> 
     function startDrag(e) { 
      // determine event object 
      if (!e) { 
       var e = window.event; 
      } 

      // IE uses srcElement, others use target 
      var targ = e.target ? e.target : e.srcElement; 

      if (targ.className != 'dragme') {return}; 
      // calculate event X, Y coordinates 
       offsetX = e.clientX; 
       offsetY = e.clientY; 

      // assign default values for top and left properties 
      if(!targ.style.left) { targ.style.left='0px'}; 
      if (!targ.style.top) { targ.style.top='0px'}; 

      // calculate integer values for top and left 
      // properties 
      coordX = parseInt(targ.style.left); 
      coordY = parseInt(targ.style.top); 
      drag = true; 

      // move div element 
       document.onmousemove=dragDiv; 

     } 
     function dragDiv(e) { 
      if (!drag) {return}; 
      if (!e) { var e= window.event}; 
      var targ=e.target?e.target:e.srcElement; 
      // move div element 
      targ.style.left=coordX+e.clientX-offsetX+'px'; 
      targ.style.top=coordY+e.clientY-offsetY+'px'; 
      return false; 
     } 
     function stopDrag() { 
      drag=false; 
     } 
     window.onload = function() { 
      document.onmousedown = startDrag; 
      document.onmouseup = stopDrag; 
     } 


</script> 

</head> 
<body> 
<div id="draggable" class="dragme">"Hello World!"</div> 
<img src="flower.jpg" alt="drag-and-drop image script" 
title="drag-and-drop image script" class="dragme">

fonte

2013-08-01 Laurence

+1 per provare una soluzione javascript pura. Ora dobbiamo solo aspettare che la mandria di "use jquery" entri a pedale :). – Parrotmaster

Perché non usi solo jQuery? – Aerovistae

Basta aggiungere return false alla fine della funzione startDrag per mantenere il browser dalla gestione dell'evento click.

fonte

2013-08-01 11:26:20 n3rd

Bello! Ho appena provato nel Fiddle e funziona perfettamente. Sto pensando di trasformare questo in un semplice gioco di scacchi Javascript basato sul browser :) – Parrotmaster

@Parrotmaster http://jsfiddle.net/YNMEX/1/ (oltre a 'return false' si noti anche' 'PreDefault' '. – Alxandr

Grazie Darmesh Patel e n3rd per il tuo aiuto e per essere così sollecito nel rispondere alla mia domanda Grazie a Parrotmaster per mettere la versione corretta del mio script su JSFiddle – Laurence

Puoi aggiungere e.preventDefault(); alla fine della funzione startDrag

fonte

2013-08-01 11:36:35

anche targ dovrebbe essere assegnato solo su startDrag e global (senza var):

http://jsfiddle.net/gigyme/YNMEX/132/

<script type="text/javascript"> 
    function startDrag(e) { 
      // determine event object 
      if (!e) { 
       var e = window.event; 
      } 
      if(e.preventDefault) e.preventDefault(); 

      // IE uses srcElement, others use target 
      targ = e.target ? e.target : e.srcElement; 

      if (targ.className != 'dragme') {return}; 
      // calculate event X, Y coordinates 
       offsetX = e.clientX; 
       offsetY = e.clientY; 

      // assign default values for top and left properties 
      if(!targ.style.left) { targ.style.left='0px'}; 
      if (!targ.style.top) { targ.style.top='0px'}; 

      // calculate integer values for top and left 
      // properties 
      coordX = parseInt(targ.style.left); 
      coordY = parseInt(targ.style.top); 
      drag = true; 

      // move div element 
       document.onmousemove=dragDiv; 
      return false; 

     } 
     function dragDiv(e) { 
      if (!drag) {return}; 
      if (!e) { var e= window.event}; 
      // var targ=e.target?e.target:e.srcElement; 
      // move div element 
      targ.style.left=coordX+e.clientX-offsetX+'px'; 
      targ.style.top=coordY+e.clientY-offsetY+'px'; 
      return false; 
     } 
     function stopDrag() { 
      drag=false; 
     } 
     window.onload = function() { 
      document.onmousedown = startDrag; 
      document.onmouseup = stopDrag; 
     } 
</script>

fonte

2014-07-01 13:27:47 Gigy

Funziona come un incantesimo. Come abilitare l'evento touch per dispositivi touch screen (tablet e smartphone) a questo script? – CodeMonk

associare un specifica elemento dell'evento di trascinamento.

function log() { 
    var debug = true; 
    if (!debug) 
     return; 
    if (arguments) { 
     for (var i = 0; i < arguments.length; i++) { 
      console.log(arguments[i]); 
     } 
    } 
}  

function Drag(element) { 
    this.dragging = false; 
    this.mouseDownPositionX = 0; 
    this.mouseDownPositionY = 0; 
    this.elementOriginalLeft = 0; 
    this.elementOriginalTop = 0; 
    var ref = this; 
    this.startDrag = function (e) { 
     e.preventDefault(); 
     ref.dragging = true; 
     ref.mouseDownPositionX = e.clientX; 
     ref.mouseDownPositionY = e.clientY; 
     ref.elementOriginalLeft = parseInt(element.style.left); 
     ref.elementOriginalTop = parseInt(element.style.top); 
     // set mousemove event 
     window.addEventListener('mousemove', ref.dragElement); 
     log('startDrag'); 
    }; 
    this.unsetMouseMove = function() { 
     // unset mousemove event 
     window.removeEventListener('mousemove', ref.dragElement); 
    }; 
    this.stopDrag = function (e) { 
     e.preventDefault(); 
     ref.dragging = false; 
     ref.unsetMouseMove(); 
     log('stopDrag'); 
    }; 
    this.dragElement = function (e) { 
     log('dragging'); 
     if (!ref.dragging) 
      return; 
     e.preventDefault(); 
     // move element 
     element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px'; 
     element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px'; 
     log('dragElement'); 
    }; 
    element.onmousedown = this.startDrag; 
    element.onmouseup = this.stopDrag; 
} 

var myDrag = new Drag(yourElement);// bind event 
console.log(myDrag.dragging);

fonte

2018-01-06 15:02:05 sambuca

Come trascinare un'immagine senza problemi sullo schermo utilizzando puro javascript

risposta

Problemi correlati