Wie ziehe ich ein Bild mit reinem Javascript über den Bildschirm glatt

Ich versuche mit JavaScript ein Bild auf dem Bildschirm ziehen. Ich habe bereits ein Skript geschrieben, das auf Divs mit Text funktioniert, aber wenn ich es auf einem Bild verwende, funktioniert es sehr zeitweise.Wie ziehe ich ein Bild mit reinem Javascript über den Bildschirm glatt

Ich habe meinen Code auf jsfiddle gesetzt, damit andere sehen können, was ich meine. http://jsfiddle.net/laurence/YNMEX/

Wenn Sie es ausführen, werden Sie feststellen, dass der Textblock gezogen werden kann, aber wenn Sie das gleiche mit dem Bild versuchen, hinterlässt es das Bild hinter sich. Es ist, als könnte das Bild nicht mit der Bewegung der Maus Schritt halten.

Ich habe den Code auf jsfiddle unten wiederholt:

<!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">

Quelle

2013-08-01 Laurence

+1 für das Versuchen einer reinen Javascript-Lösung. Jetzt müssen wir nur warten, bis die "usage jquery" -Herde hereingestampft ist :). – Parrotmaster

Warum verwenden Sie nicht nur jQuery? – Aerovistae

einfach return false am Ende Ihrer startDrag Funktion fügen Sie den Browser, um zu verhindern das Click-Event-Handling.

Quelle

2013-08-01 11:26:20 n3rd

Schön! Habe es einfach in der Fiddle ausprobiert und es funktioniert einwandfrei. Ich denke darüber nach, dies in ein einfaches browserbasiertes Javascript Chess Spiel zu verwandeln :) – Parrotmaster

@Protmaster http://jsfiddle.net/YNMEX/1/ (zusätzlich zu 'return false' notiere auch 'preventDefault'. – Alxandr

Danke Darmesh Patel und n3rd für Ihre Hilfe und dafür, so schnell auf meine Frage zu antworten. Danke Parrotmaster für die korrekte Version meines Skripts auf JSFiddle – Laurence

können Sie fügen e.preventDefault(); am Ende Ihrer startDrag Funktion

Quelle

2013-08-01 11:36:35

Auch targ sollte nur auf startDrag und global (ohne var) zugewiesen werden:

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>

Quelle

2014-07-01 13:27:47 Gigy

Es funktioniert wie Charme.Wie Touch-Ereignis für Touchscreen-Geräte (Tablets und Smartphones) aktivieren zu diesem Skript? – CodeMonk

Bind ein spezifischen Element des Ziehereignisses.

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);

Quelle

2018-01-06 15:02:05 sambuca

Wie ziehe ich ein Bild mit reinem Javascript über den Bildschirm glatt

Antwort

Verwandte Themen