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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
vue mounted组件的使用
Jun 18 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
100行代码实现一个vue分页组功能
Nov 06 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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python常用知识梳理(必看篇)
2017/03/23 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
乔迁宴答谢词
2014/01/21 职场文书
运动会通讯稿50字
2014/01/30 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人年底工作总结
2015/03/10 职场文书
财务会计求职信范文
2015/03/20 职场文书
民事代理词范文
2015/05/25 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
tomcat下部署jenkins的方法
2022/05/06 Servers