javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

更新时间：2012年05月23日 23:29:27 作者：

javascript简单拖拽，简单拖拽实现

mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。

简单拖拽实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖拽实现</title> <style type="text/css"> *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;} </style> </head> <body> <div id="box"> <div id="dragBox">拖我</div> </div> <script type="text/javascript"> var VVG = {}; //命名空间 VVG.DOM = { $: function(id) { //创建方便的选择符 return typeof id == "string" ? document.getElementById(id) : id; }, bindEvent: function(node, type, func) { //事件绑定方法 if (node.addEventListener) { node.addEventListener(type, func, false); } else if (node.attachEvent) { node.attachEvent("on" + type, func); } else { node["on" + type] = func; } }, getEvent: function(event) { //获取事件 return event ? event : window.event; }, getTarget: function(event) { //获取事件目标 return event.target || event.srcElement; } } var DragDrop = function() { //新建一个返回对象的函数 var box = VVG.DOM.$("box"); //获取外围BOX var dragBox = VVG.DOM.$("dragBox");//获取需要拖动的BOX var dragging = null; //初始化对象 function drag(event) { //事件执行函数 event = VVG.DOM.getEvent(event); var target = VVG.DOM.getTarget(event); switch (event.type) {//判断事件类型 case "mousedown": if(target.id == "dragBox"){ //当事件对象的ID等于要拖动的BOX的ID时 dragging = target; //赋值到拖动目标 } break; case "mousemove": if(dragging){ //当有拖动目标时执行 sTop = document.documentElement.scrollTop || document.body.scrollTop; //当有滚动条的时候卷去页面的高度 dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px"; dragging.style.top = (event.clientY + sTop - box.offsetTop - dragBox.offsetHeight/2 ) + "px"; var left = parseInt(dragging.style.left); var top = parseInt(dragging.style.top); //console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop); // 比较坐标是否超出外围的BOX if(left < 0){ dragging.style.left = 0 +"px"; } if(top < 0){ dragging.style.top = 0+"px"; } if(left > box.offsetWidth - dragBox.offsetWidth){ dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px"; } if(top > box.offsetHeight - dragBox.offsetHeight){ dragging.style.top =( box.offsetHeight - dragBox.offsetHeight - 2 )+"px"; } } break; case "mouseup": // 清空拖动目标 dragging = null; break; } }; return { dragStart: function() { // 绑定事件 VVG.DOM.bindEvent(document, "mousedown", drag); VVG.DOM.bindEvent(document, "mousemove", drag); VVG.DOM.bindEvent(document, "mouseup", drag); } } }(); DragDrop.dragStart(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

简单拖拽

微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
这篇文章主要给大家介绍了关于微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb的相关资料，文中通过示例代码介绍的非常详细，需要的朋友参考借鉴，下面随着小编来一起学习学习吧
2018-07-07
js图片无缝滚动插件使用详解
这篇文章主要为大家详细介绍了js图片无缝滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
js实现弹窗效果
这篇文章主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
bootstrap自定义样式之bootstrap实现侧边导航栏功能
bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单。接下来通过本文给大家介绍bootstrap实现侧边导航栏功能，感兴趣的朋友一起看看吧
2018-09-09
js常用代码段收集
以下是平时收集的几个常用代码段，大多数是从网上搜集而来。也均为未找到是谁谁原创，是否允许转载等要求，所以如果看到的朋友发现其中有些代码是自己写的，还请原谅在下转帖出来。
2011-10-10
web打印小结
本文主要介绍了一款比较强大的web打印工具lodop实现将winform客户端的打印，移到网页上由客户自行打印，打印要求是根据一定的格式实现套打的过程与方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
使用JavaScript实现node.js中的path.join方法
Node.JS中的 path.join 非常方便，能直接按相对或绝对合并路径，有时侯前端也需要这种方法，如何实现呢？感兴趣的朋友跟随脚本之家小编一起看看吧
2018-08-08
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
写了个html5播放视频的video控件，只支持mp4和3gp(android和ios默认支持的格式就写了这个) ,需要的朋友可以参考下
2014-05-05
3分钟掌握常用的JS操作JSON方法总结
工作中做了几款自动化测试工具都是跟日志读取相关，日志格式又大多数都是JSON，所以这里把常用的JS操作JSON的方法做了总结
2017-04-04
使用原生的javascript来实现轮播图
这篇文章主要介绍了使用原生的javascript来实现轮播图,在代码底部给大家补充了原生javascript实现banner图自动轮播切换，需要的朋友可以参考下
2017-02-02