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需再刷新一下页面才能执行]

您可能感兴趣的文章:

简单拖拽

js 获取html5的data属性实现方法
下面小编就为大家带来一篇js 获取html5的data属性实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
前端axios下载excel文件(二进制)的处理方法
新接了项目，遇到这样的需求，通过后端接口下载excel文件，后端没有文件地址，返回二进制流文件。接下来通过实例代码给大家分享前端axios下载excel文件(二进制)的处理方法，一起看看吧
2018-07-07
js 页面传参数时参数值含特殊字符的问题
解决方法就是利用js的escape函数，这个函数在解决中文乱码等方面应用的比较广泛。推荐使用。
2009-12-12
前端检测用户登录状态是否过期的几种方法
这篇文章主要介绍了在前端开发中判断用户登录状态是否过期的方法,包括检查令牌有效期、定时轮询服务器、全局请求拦截器和利用Web存储中的时间戳,文章还讨论了在特定场景下如何实现优雅降级,以避免中断用户操作,需要的朋友可以参考下
2024-11-11
js锚点、操作滚动条滑动scroll代码演示
滑动锚点挺有意思的,可增加一些浏览性,下面这篇文章主要给大家介绍了关于js锚点、操作滚动条滑动scroll的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
Kimi模型调用联动前端简单交互页面实现方法
这篇文章主要介绍了如何使用Flask搭建一个简单的AI聊天应用,并通过OpenAI API实现对话功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-02-02
DOM 事件的深入浅出（一）
本文主要介绍了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的DOM事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。
2016-12-12
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
本篇文章主要介绍了JavaScript的延迟对象、跨域、模板引擎、弹出层、AJAX，对其进行示例解析，具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12
JS中关于Class类的静态属性和静态方法
这篇文章主要介绍了JS中关于Class类的静态属性和静态方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
js实现复选框的全选和取消全选效果
在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，本文将简单介绍一下JS如何实现此功能
2017-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具