事件拖拽回放事件

Posted ljyaqd

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件拖拽回放事件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{
             width: 100px;
             height: 100px;
             background: blue;
             position: absolute;left: 0px; top: 0px;
		}
		*{
			margin: 0px;
			padding: 0px;
		}
	</style>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn" name="" value="回放">
   <script type="text/javascript">
   	var arrX=[],arrY=[];
   	div1.onmousedown=function(e){
        var ev=e||event;
        
        var l=ev.clientX-this.offsetLeft;
        var t=ev.clientY-this.offsetTop;
       arrX.push(0);
       arrY.push(0);
   		document.onmousemove=function(e){
   			      var ev=e||event;
   			      var needLeft=ev.clientX-l;
                  var needTop=ev.clientY-t;
                  arrX.push(needLeft);
                  arrY.push(needTop);
                 div1.style.left = needLeft + ‘px‘;
                 div1.style.top =needTop+‘px‘;
   		};
   		document.onmouseup=function(){
   			document.onmousemove=null;
   			document.onmousedowm=null;
  
   		}     
   		  var t=null;
          btn.onclick=function(){
            clearInterval(t) ;
            t=setInterval(function(){
          	 if(arrY.length==0){
          	 	clearInterval(t);
          	 }
          	 div1.style.left= arrX.pop()+‘px‘;
                  div1.style.top=  arrY.pop() +‘px‘;

              },30)
               
          }
   		return false;
   	}

   </script>
</body>
</html>

　　

以上是关于事件拖拽回放事件的主要内容，如果未能解决你的问题，请参考以下文章

解决 vue.draggable 拖拽 点击事件失效无效与拖拽事件冲突的问题

VUE 创建页面浮窗，拖拽事件与点击事件共存

拖拽上传实现

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

JS中的鼠标事件，拖拽一个东西

原生拖拽,拖放事件(drag and drop)