js 原生拖拽，返回到原点

2024-05-10 09:08:47

拖拽效果很是普遍今天拿原生简单写一下

（可以按拖拽轨迹返回到原点）

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<style>
   *{
       margin: 0;
       padding: 0;
       color:#666;
   }
   div{
       height: 150px;
       width: 300px;
       border: 1px solid #ccc;
       position: absolute;
       left: 150px;
       top: 150px;
   }
   h5{
       line-height: 35px;
       text-align: right;
       padding-right: 12px;
       border-bottom: 1px solid #ccc;
       cursor: move;
   }
   h5 span{
       cursor: pointer;
   }
   li{
       list-style: none;
       line-height: 25px;
       padding-left: 12px;
   }
</style>
<body>
   <div id="box">
       <h5 id="nav"><span id="back">点击我原路返回</span></h5>
       <ul>
           <li>Drag: <span>false</span></li>
           <li>Top: <span>150</span></li>
           <li>Left: <span>150</span></li>
       </ul>
   </div>
</body>
</html>

<script type="text/javascript">

var box=document.getElementById("box"),
   nav=document.getElementById("nav"),
   back=document.getElementById("back"),
   spans=document.getElementsByTagName("span"),
   rouse=[{x:box.offsetLeft,y:box.offsetTop}],
   Drag=false;

   nav.οnmοusedοwn=function(){

       Drag=true;
   }

document.οnmοusemοve=function(e){
var e=e || window.e;
if(!Drag) return false;

box.style.left=e.clientX-30+"px";
       box.style.top=e.clientY-17+"px";
       rouse.push({x:box.offsetLeft, y:box.offsetTop});
       offset();
   }

document.οnmοuseup=function(){
       Drag=false;
       offset();
   }
   back.οnclick=function(){
       console.log(rouse);
       if(rouse.length==1) return false;
       var timer=setInterval(function(){
           var oPos =rouse.pop();
           oPos ? (box.style.left =oPos.x + "px", box.style.top = oPos.y + "px", offset()) : clearInterval(timer)
           console.log(oPos);
       },30)
   }

function offset(){
       spans[1].innerHTML=Drag;
       spans[2].innerHTML=box.offsetLeft;
       spans[3].innerHTML=box.offsetTop;
   }
   box.ontouch

</script>

还望各位多多指点！！！

---恢复内容结束---

转载于:https://www.cnblogs.com/FE-Allen/p/6110412.html

js 原生拖拽，返回到原点相关推荐

html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
李炎恢 js教程拖拽上思路解析
李炎恢再讲js教程拖拽上讲到一个登录框,通过鼠标移动登录框到浏览器各个地方,我们现在对李炎恢的怎么想出进行分析: 问题期望是什么? 1.我们通过鼠标点击登录框,然后登录框被移动,松开鼠标,停止移动 ...
js 鼠标拖拽改变div宽度高度
js 鼠标拖拽改变div宽度高度, <!DOCTYPE html> <html><head><meta charset="UTF-8" / ...
web使用panzoom.js 缩放拖拽工程图cad图
web使用panzoom.js 缩放拖拽工程图cad图前言第一步下载图片转换工具将cad的dwg转换为svg 第二步普通的cad 转换后大概4-5M 如果直接放入html 加载会很缓慢需 ...
java drag drop_原生拖拽,拖放事件(drag and drop)
原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事 ...

最新文章

热门文章