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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
laravel 4安装及入门图文教程
2014/10/29 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
详解weex默认webpack.config.js改造
2018/01/08 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python实现中文转换url编码的方法
2016/06/14 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
兼职业务员岗位职责
2014/01/01 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
农业项目建议书
2014/08/25 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
高老头读书笔记
2015/06/30 职场文书
初中运动会前导词
2015/07/20 职场文书
《雷雨》教学反思
2016/02/20 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
jquery插件实现代码雨特效
2021/04/24 jQuery