JavaScript 拖拽实例代码


Posted in Javascript onSeptember 21, 2016

一、JS 拖拽的实现实例代码:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>拖拽js</title>
 <style type="text/css">
 html, body {
 overflow:hidden;
 }
 body, div, {
 margin:0;
 padding:0;
 }
 body {
 color:#fff;
 font:12px/2 Arial;
 }
 p {
 padding:0 10px;
 margin-top:10px;
 }
 span {
 color:#ff0;
 padding-left:5px;
 }
 #box {
 position:absolute;
 width:300px;
 height:150px;
 background:#D5CDDA;
 border:2px solid #ccc;
 top:150px;
 left:400px;
 margin:0;
 }
 #drag {
 height:25px;
 cursor:move;
 background:#724a88;
 border-bottom:2px solid #ccc;
 padding:0 10px;
 }

</style>
</head>
<body>
<div id="box">
 <div id="drag">拖动区域</div>
 被拖动的整个div
 </div>
</body>
</html>

<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
 moveBox($("#box"),$("#drag")) ;
})
//B被拖动的div,BT可拖动区域
function moveBox(B,BT){
 var bDrag = false;
 var _x,_y;
 BT.mousedown(function(event){
var e=event || window.event;
bDrag = true;
 _x=e.pageX-B.position().left;
 _y=e.pageY-B.position().top;
 return false
 })
 $(document).mousemove(function(event){
 if(!bDrag) return false;
 var e=event || window.event;
 var x=e.pageX-_x;
 var y=e.pageY-_y;
 console.log(B.position());
 var maxL = $(document).width() - B.outerWidth();
 var maxT = $(document).height() - B.outerHeight();
 x = x < 0 ? 0: x; x = x > maxL ? maxL: x;
 y = y < 0 ? 0: y; y = y > maxT ? maxT: y;
 B.css({left:x,top:y});
 return false
 }).mouseup(function(){
 bDrag = false;
 return false
 })
}
</script>

二、 js之拖拽效果

主要原理:

   1、当鼠标按下时,记录鼠标坐标,用到的是 onmousedown;

   2、当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove;

   3、当鼠标松开时,清除事件,用到的是 onmouseup;

了解的知识:

   1、div 的 offsetLeft 与 style.left 的区别:https://3water.com/article/93142.htm

效果图如下:

JavaScript 拖拽实例代码

突然发现有没有效果图都一样哈哈,不说废话了,上代码:

html代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf8">
 <title>js拖拽效果</title>
 <style type="text/css">
 #div1 {
  width : 200px;
  height: 200px;
  position: absolute;
  background: #99dd33;
  cursor: move;
 }
 </style>
</head>
<body>
 <div id="div1"></div>
</body>
<script type="text/javascript">
 // js代码
</script>
</html>

js代码:

window.onload function() {
 var disX = disY = 0;       // 鼠标距离div的左距离和上距离
 var div1 = document.getElementById("div1"); // 得到div1对象
 
 // 鼠标按下div1时
 div1.onmousedown = function(e) {
  var evnt = e || event;     // 得到鼠标事件
  disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left
  disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top
  
  // 鼠标移动时
  document.onmousemove = function(e) {
   var evnt = e || event;
   var x = evnt.clientX - disX;
   var y = evnt.clientY - disY;
   var window_width = document.documentElement.clientWidth - div1.offsetWidth;
   var window_height = document.documentElement.clientHeight - div1.offsetHeight;
   
   x = ( x < 0 ) ? 0 : x;       // 当div1到窗口最左边时
   x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时
   y = ( y < 0 ) ? 0 : y;       // 当div1到窗口最上边时
   y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时
   
   div1.style.left = x + "px";
   div1.style.top = y + "px";
  };
  
  // 鼠标抬起时
  document.onmouseup = function() {
   document.onmousemove =null;
   document.onmouup = null;
  };
  
  return false;
 };
};

 当然,这个虽然支持大部分浏览器,但是,我觉得div跟随鼠标的速度有点滞后,如果有好的解决办法请联系我喔,谢谢!

以上就是js实现拖拽的实例代码,有需要的小伙伴可以参考下,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 #Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #Javascript
AngularJS 单元测试(二)详解
Sep 21 #Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
生成php程序的php代码
2008/04/07 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
php支付宝APP支付功能
2020/07/29 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
使用Python中的tkinter模块作图的方法
2017/02/07 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
flask session组件的使用示例
2018/12/25 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
应聘美工求职信
2013/11/07 职场文书
厨师岗位职责
2013/11/12 职场文书
成功的酒店创业计划书
2013/12/27 职场文书
房地产财务管理制度
2014/02/02 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
卖车协议书范例
2014/09/16 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
优秀教师个人材料
2014/12/15 职场文书
2014年党小组工作总结
2014/12/20 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏