Jak przeciągnąć obraz płynnie po ekranie za pomocą czystego javascript

Próbuję użyć JavaScriptu przeciągając obraz po ekranie. Napisałem już skrypt, który działa dobrze na elementach div z tekstem, ale gdy używam go na obrazie, działa on bardzo sporadycznie.Jak przeciągnąć obraz płynnie po ekranie za pomocą czystego javascript

Umieściłem mój kod na jsfiddle, aby inni mogli zobaczyć, co mam na myśli. http://jsfiddle.net/laurence/YNMEX/

Jeśli go uruchomisz, zobaczysz, że blok tekstu można przeciągać i upuszczać, ale gdy spróbujesz tego samego z obrazem, pozostawi obraz za sobą. To tak, jakby obraz nie nadążał za ruchem myszy.

Mam powtórzony kod na jsfiddle poniżej:

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

Źródło

2013-08-01 Laurence

+1 za wypróbowanie czystego rozwiązania javascript. Teraz musimy tylko poczekać, aż stado "use jquery" przyjdzie stąpać :). – Parrotmaster

Dlaczego po prostu nie użyjesz jQuery? – Aerovistae

Wystarczy dodać return false na końcu swojej funkcji startDrag zachować przeglądarkę z obsługi zdarzenia click.

Źródło

2013-08-01 11:26:20 n3rd

Nice! Po prostu wypróbowałem to w skrzypcach i działa bezbłędnie. Zastanawiam się nad przekształceniem tego w prostą grę JavaScript w szachy opartą na przeglądarce :) – Parrotmaster

@Parrotmaster http://jsfiddle.net/YNMEX/1/ (oprócz 'return false' zwróć także uwagę na' preventDefault'. – Alxandr

Dziękuję Darmesh Patel i n3rd za pomoc i za tak szybkie udzielenie odpowiedzi na moje pytanie Dziękuję Parrotmaster za umieszczenie poprawnej wersji mojego skryptu na JSFiddle – Laurence

Możesz dodać e.preventDefault(); na końcu swojej funkcji startDrag

Źródło

2013-08-01 11:36:35

także targ należy przypisać tylko na startDrag i global (bez 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>

Źródło

2014-07-01 13:27:47 Gigy

Działa jak urok. Jak włączyć zdarzenie dotykowe dla urządzeń z ekranem dotykowym (tablety i smartfony) do tego skryptu? – CodeMonk

powiązać specyficzny element zdarzenia przeciągania.

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

Źródło

2018-01-06 15:02:05 sambuca

Jak przeciągnąć obraz płynnie po ekranie za pomocą czystego javascript

Odpowiedz

Powiązane problemy