js实现鼠标拖曳效果


Posted in Javascript onDecember 30, 2020

js实现鼠标的拖曳效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

效果如下:

js实现鼠标拖曳效果

下面是代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>鼠标拖曳效果</title>
 <style>
 body{
  background:black;
 }
 #box{
  position:absolute;
  background: rgb(148, 143, 143);
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: white 2px solid;
 }
 .topTitle{
  cursor: move;
  border-bottom: white 2px solid;
  background: #cccccc;
  text-align: right;
  color: white;
  height: 20px;
  line-height: 20px;

 }
 .content >div{

  background: rgb(148, 143, 143);
  height: 50px;
  line-height: 50px;
  color: white;
  text-align: left;
 }
 </style>
</head>
<body>
 
 <div id="box">
 <div class="topTitle"><a href="#" >点击回放拖动轨迹</a></div>
 <div class="content">
  <div>Drag:</div> 
  <div>offsetTop:</div> 
  <div>offsetLeft</div> 
 </div>
 </div>
</body>
<script>

 var oBox=document.getElementById("box");
 var oTopTitle=document.getElementsByClassName("topTitle")[0];
 var aDiv= document.querySelectorAll(".content >div");
 var offWidth=document.documentElement.clientWidth;
 var clHight=document.documentElement.clientHeight;
 var i,t;
 var state="false";

 var oText=document.querySelector(".topTitle a");
 oTopTitle.onmousedown=function(even){
 var OffsetE=even||window.event;
var flag=true;

//设立边界:
 
 document.onmousemove=function(even){
 state="true";
  var ClientE=even||window.event;
  l=ClientE.clientX-OffsetE.offsetX;
  t=ClientE.clientY-OffsetE.offsetY;
  recorde(l,t,flag);
 if(l<0){
  l=0;
 }
 if(t<0){
  t=0;
 }
 if(l>offWidth-oBox.offsetWidth){
  l=offWidth-oBox.offsetWidth;
 }
 if(t>clHight-oBox.offsetHeight){
  t=clHight-oBox.offsetHeight;
 }
  
  oBox.style.left=l+"px";
  oBox.style.top=t+"px";

 }
 
 document.onmouseup=function(){
  console.log(1);
  state="false";
 
  document.onmousemove=null;
  document.onmouseup=null;
 }
 OffsetE.preventDefault();
 flag=false;
 
 }
 oText.onclick=function(){
 var reback=recorde(l,t);

 var index=reback.strX.length;
 setInterval(function(){
 if(index<0){
  clearInterval();
  return;
 }
 oBox.style.left=reback.strX[index--]
 +"px";
 oBox.style.top=reback.strY[index--]+"px";
 },30);

 
  
 
 
strX=[];
 strY=[];
 
}
var strX=[];
var strY=[]; 
function recorde(offsetTop,offsetLeft,flag){

 
 
 var text1=aDiv[1].innerText;
 aDiv[0].innerHTML="Drag:"+"<span style='color:yellow'>"+state+"</span>";
 aDiv[1].innerHTML="offsetTop:"+"<span style='color:yellow'>"+offsetTop+"</span>";
 aDiv[2].innerHTML="offsetLeft:"+"<span style='color:yellow'>"+offsetLeft+"</span>";
 
 
 strX.push(offsetTop) ;
 strY.push(offsetLeft);
 // console.log(strX);
 // console.log(strY);
 return {
 strX,
 strY
 
 }

 }

</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生javascript兼容性测试实例
Jul 01 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
微信小程序实现简单购物车功能
Dec 30 #Javascript
微信小程序实现购物车小功能
Dec 30 #Javascript
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
You might like
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python中 logging的使用详解
2017/10/25 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python递归全排列实现方法
2018/08/18 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python 实现屏幕录制示例
2019/12/23 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
2014年小班元旦活动方案
2014/02/16 职场文书
先进员工获奖感言
2014/08/14 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
python中pycryto实现数据加密
2022/04/29 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers