如何使用純javascript在屏幕上平滑地拖動圖像

我正在嘗試使用JavaScript在屏幕上拖動圖像。我已經寫了一個腳本，可以很好地處理文本的div，但是當我在圖像上使用它時，它會非常間歇地運行。如何使用純javascript在屏幕上平滑地拖動圖像

我已將我的代碼放在jsfiddle上，以便其他人可以看到我的意思。 http://jsfiddle.net/laurence/YNMEX/

如果您運行它，您會發現可以拖放文本塊，但是當您對圖像嘗試同樣的操作時，會將圖像留在後面。這就像圖像無法跟上鼠標的運動。

我已經重複下面的jsfiddle代碼：

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

來源

2013-08-01 Laurence

+1嘗試純JavaScript解決方案。現在我們只需要等待「使用jquery」羣體來跺腳:)。 – Parrotmaster

爲什麼你不使用jQuery？ – Aerovistae

你startDrag函數結束時只需添加return false保持瀏覽器處理點擊事件。

來源

2013-08-01 11:26:20 n3rd

不錯！剛剛在小提琴中嘗試過，它完美無瑕。我正想着把它變成一個簡單的基於瀏覽器的Javascript國際象棋遊戲:) – Parrotmaster

@Parrotmaster http://jsfiddle.net/YNMEX/1/（除了'return false'還注意到'preventDefault'。 – Alxandr

謝謝Darmesh Patel和n3rd爲您提供幫助，並在回答我的問題時非常及時。謝謝Parrotmaster將我的腳本的正確版本放在JSFiddle上 – Laurence

你可以在你的startDrag函數的末尾添加e.preventDefault();

來源

2013-08-01 11:36:35

而且targ應該只startDrag和global分配（不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>

來源

2014-07-01 13:27:47 Gigy

它的作用像魅力一樣。如何爲觸摸屏設備（平板電腦和智能手機）啓用觸摸事件到這個腳本？ – CodeMonk

綁定一個具體拖動事件的元素。

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

來源

2018-01-06 15:02:05 sambuca

如何使用純javascript在屏幕上平滑地拖動圖像

回答

相關問題