如何使用纯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在屏幕上平滑地拖动图像

回答

相关问题