js拖拽div移动

拼搏现实的明天。 2022-05-13 00:08 288阅读 0赞

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置

## 如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意！ ##

第一种方法如下：

代码如下：

html代码如下：

js代码如下：

使用的时候，直接调用

DragDivDrag("titleBar", "message\_box", \{ opacity: 100, keepOrigin: true \});

代码中

new Drag(titleBarID, message_boxID, obj); //, area: { left: 50, right: 500, top: 100, bottom: 400}

area参数代表div可移动的范围

仅供参考，如有疑问，请留言...

`如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意 第二中拖动的实现代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>自由拖动的DIV层方块</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #draggable{ background-color:green; font-size:9pt; padding:30px; color:white; width:360px; height:224px; position:absolute; } </style> <script type="text/javascript"> var rDrag = { 	 	o:null, 	 	init:function(o){ 		o.onmousedown = this.start; 	}, 	start:function(e){ 		var o; 		e = rDrag.fixEvent(e);                e.preventDefault && e.preventDefault();                rDrag.o = o = this; 		o.x = e.clientX - rDrag.o.offsetLeft;                 o.y = e.clientY - rDrag.o.offsetTop; 		document.onmousemove = rDrag.move; 		document.onmouseup = rDrag.end; 	}, 	move:function(e){ 		e = rDrag.fixEvent(e); 		var oLeft,oTop; 		oLeft = e.clientX - rDrag.o.x; 		oTop = e.clientY - rDrag.o.y; 		rDrag.o.style.left = oLeft + 'px'; 		rDrag.o.style.top = oTop + 'px'; 	}, 	end:function(e){ 		e = rDrag.fixEvent(e); 		rDrag.o = document.onmousemove = document.onmouseup = null; 	},     fixEvent: function(e){         if (!e) {             e = window.event;             e.target = e.srcElement;             e.layerX = e.offsetX;             e.layerY = e.offsetY;         }         return e;     } } window.onload = function(){         var obj = document.getElementById('draggable'); 	rDrag.init(obj); } </script> </head> <body> <div id="draggable">这个可以拖动！</a></div> </body> </html>  <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script> 上一篇图形数据库之---neo4j(非关系型数据库) 下一篇关于js动态生成元素，注册(绑定)的事件失效的解决(on) <script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434"></script><script type="text/javascript" id="bdshell_js"></script><script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) </script> 顶 1 踩 0 主题推荐 microsoft 鼠标 移动 firefox 图片 猜你在找 <script type="text/javascript"> var searchtitletags = 'js拖拽div移动' + ',' + 'microsoft,鼠标,移动,firefox,图片'; searchService({ index: 'blog', query: searchtitletags, from: 10, size: 10, appendTo: '#res-relatived', url: 'recommend', his: 2, client: "blog_cf_enhance", tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>' }); </script> <script type="text/javascript"> new Ad(4, 'ad_cen'); </script> 查看评论 * 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场 <script type="text/javascript"> var fileName = '14640591'; var commentscount = 1; var islock = false </script><script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script> <script type="text/javascript"> new Ad(5, 'ad_bot'); </script> <script type="text/javascript"> $(function () { $("#ad_frm_0").height("90px"); setTimeout(function(){ $("#ad_frm_2").height("200px"); },1000); if($("#comment_content").length>0) { $("#quick-reply").show(); $("#quick-reply").click(function(){ setEditorFocus(); }); } var d_top = $('#d-top-a'); document.onscroll = function () { var scrTop = (document.body.scrollTop || document.documentElement.scrollTop); if (scrTop > 500) { d_top.show(); } else { d_top.hide(); } } $('#d-top-a').click(function () { scrollTo(0, 0); this.blur(); return false; }); }); </script><style type="text/css"> .tag_list { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #D7CBC1; color: #000000; font-size: 12px; line-height: 20px; list-style: none outside none; margin: 10px 2% 0 1%; padding: 1px; } .tag_list h5 { background: none repeat scroll 0 0 #E0DBD3; color: #47381C; font-size: 12px; height: 24px; line-height: 24px; padding: 0 5px; margin: 0; } .tag_list h5 a { color: #47381C; } .classify { margin: 10px 0; padding: 4px 12px 8px; } .classify a { margin-right: 20px; white-space: nowrap; } </style> 核心技术类目 全部主题 Hadoop AWS 移动游戏 Java Android iOS Swift 智能硬件 Docker OpenStack VPN Spark ERP IE10 Eclipse CRM JavaScript 数据库 Ubuntu NFC WAP jQuery BI HTML5 Spring Apache .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap <script type="text/javascript"> $(function(){ setTimeout(function(){ $(".comment_body:contains('回复')").each(function(index,item){ var u=$(this).text().split('：')[0].toString().replace("回复","") var thisComment=$(this); if(u) { $.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) { if(a!=null&&a.data!=null&&a.data.length>0) { nick=a.data[0].n; if(u!=nick) { thisComment.text(thisComment.text().replace(u,nick)); } } }); } }); },200); setTimeout(function(){ $("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"}); },300); }); </script>`

个人资料

[ ![1\_qxs965266509.jpg][1_qxs965266509.jpg]][_1_qxs965266509.jpg_1_qxs965266509.jpg]  
[qxs965266509][_1_qxs965266509.jpg_1_qxs965266509.jpg]

![1][]

*  访问：213119次
 *  积分：4680
 *  等级： ![blog5.png][]
    
    积分：4680
 *  排名：第1909名

*  原创：225篇
 *  转载：1篇
 *  译文：0篇
 *  评论：154条

QQ在线 [![点击这里给我发消息][890299_1323222425UUsT.jpg]][890299_1323222425UUsT.jpg 1]  
[![1369317411\_8814.png][1369317411_8814.png]][1369317411_8814.png_1369317411_8814.png]  
[![分享到点点][1371437543_5793.png]][1371437543_5793.png 1]  
<marquee align="middle"><br><font color="orange" size="3" face="楷书">相信自己，我能行</font></marquee>  
[![填写您的邮件地址，订阅我们的精彩内容：][1380009465_2898.png]][1380009465_2898.png 1]

博客专栏

<table> 
 <tbody> 
  <tr> 
   <td> <a href="http://blog.csdn.net/column/details/xiaosong.html" rel="nofollow"><img src="http://avatar.csdn.net/blogpic/20130527154622623.jpg" style="width:75px;" alt="20130527154622623.jpg"></a> </td> 
   <td style="vertical-align:top;"> <a href="http://blog.csdn.net/column/details/xiaosong.html" rel="nofollow">深入浅出之Struts2</a> <p>文章：9篇</p> 阅读：8386 </td> 
  </tr> 
 </tbody> 
</table>

文章分类

*  [网页制作][Link 1](6)
 *  [Java编程][Java](73)
 *  [数据库][Link 2](8)
 *  [个人日志][Link 3](2)
 *  [android][](28)
 *  [Java Web开发][Java Web](47)
 *  [面试][Link 4](14)
 *  [Jsp][](29)
 *  [Hibernate][](10)
 *  [Struts2][](9)
 *  [JS][](26)
 *  [ajax][](9)
 *  [jQuery][](5)
 *  [oracle][](7)
 *  [spring][](6)
 *  [Nodejs][](9)
 *  [neo4j][](1)

文章存档

[2014年07月][2014_07] (1) [2014年03月][2014_03] (1) [2014年02月][2014_02] (1) [2013年12月][2013_12] (1) [2013年11月][2013_11] (5) [2013年10月][2013_10] (3) [2013年09月][2013_09] (11) [2013年08月][2013_08] (9) [2013年07月][2013_07] (5) [2013年06月][2013_06] (14) [2013年05月][2013_05] (16) [2013年04月][2013_04] (15) [2013年03月][2013_03] (19) [2013年02月][2013_02] (1) [2012年12月][2012_12] (13) [2012年11月][2012_11] (28) [2012年10月][2012_10] (16) [2012年09月][2012_09] (20) [2012年07月][2012_07] (5) [2012年06月][2012_06] (4) [2012年05月][2012_05] (11) [2012年04月][2012_04] (10) [2012年03月][2012_03] (6) [2012年02月][2012_02] (6) [2011年12月][2011_12] (1) [2011年11月][2011_11] (2) [2011年10月][2011_10] (2)

阅读排行

*  各种快递查询--Api接口(12318)
 *  我的命运,我规划 -------大学生职业生涯规划\_短期规划(7127)
 *  HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头(5073)
 *  HTML5 LocalStorage本地存储和sessionStorage使用(4138)
 *  数据库的查询与视图(3961)
 *  Java乔晓松-一次请求在同一个事务实现(3541)
 *  城市公交查询--Api接口(3458)
 *  火车车次查询-余票查询--Api接口(3188)
 *  Java乔晓松-2013android最新面试题(2812)
 *  Java\_乔晓松\_Java网络编程UDP实现黑窗口聊天(2787)

评论排行

*  我的命运,我规划 -------大学生职业生涯规划\_短期规划(58)
 *  Java乔晓松-android使用GridView布局的电子相册&服务器获取图片(14)
 *  火车车次查询-余票查询--Api接口(8)
 *  js数组的用法以及数组根据下标(数值或字符)移除元素(7)
 *  数据库基本命令的总结(6)
 *  苹果序列号/IMEI号查询--Api接口(4)
 *  Java乔晓松-httpURLConnection、URL、httpClient、httpPost、httpGet之代码详解篇(4)
 *  索引和数据完整性约束的总结(4)
 *  Java乔晓松-2013Java最新面试题(4)
 *  Java乔晓松-android中调用系统拍照功能并显示拍照的图片(3)

最新评论

*  自定义spring容器--spring容器读取bean配置文件的原理
    
    bq1073100909: 为什么我的报错呢？我是看了传智播客的视频写出来的，是不是jar包的问题，你的spring是多少版本的...
 *  各种快递查询--Api接口
    
    chong\_wu: http://www.haoservice.com/docs/18 这个快递查询接口还不错,免费的...
 *  js中的referrer使用,返回上一页
    
    qxs965266509: @a734998102:MSIE是判断浏览器是不是IE浏览器的http://blog.csdn.ne...
 *  js中的referrer使用,返回上一页
    
    a734998102: 不知道你能不能看到， 我是新手啊，。。现在用到了这方面知识。。你能解释一下MSIE是什么啊 url...
 *  Java乔晓松-httpURLConnection、URL、httpClient、httpPost、httpGet之代码详解篇
    
    qxs965266509: @geili\_178:客户端百度云链接(客户端)：http://pan.baidu.com/s/1q...
 *  Java乔晓松-httpURLConnection、URL、httpClient、httpPost、httpGet之代码详解篇
    
    qxs965266509: @geili\_178:服务器百度云链接(服务器)：http://pan.baidu.com/s/1g...
 *  Java乔晓松-httpURLConnection、URL、httpClient、httpPost、httpGet之代码详解篇
    
    geili\_178: 你好，这两天在研究httpClient，希望博主能发一份源码，万分感谢，邮箱:873965057@q...
 *  Java乔晓松-android使用GridView布局的电子相册&服务器获取图片
    
    xiao\_wenrun: 楼主 能不能把服务端的源码发我一份啊！邮箱：461683480@qq.com
 *  Ajax长连接
    
    qxs965266509: @lowitty:亲，是否阻塞还的看服务器的，我的服务器是Nodejs做的，并且，长连接的响应res...
 *  java线程中yield(),sleep(),wait()区别详解
    
    u013323077: 真不要脸，复制粘贴别人的东西还贴上自己的名字！

[1_qxs965266509.jpg]: http://avatar.csdn.net/F/8/1/1_qxs965266509.jpg
[_1_qxs965266509.jpg_1_qxs965266509.jpg]: /images/20220513/195d0cef090a4d48982bd32dedb1717c.png
[1]: /images/20220513/9cd2c06314024e648e5825ec053a7a3a.png
[blog5.png]: /images/20220513/6af3bdf4c7104c678687fca1e3d5a9d0.png
[890299_1323222425UUsT.jpg]: http://hi.csdn.net/attachment/201112/7/890299_1323222425UUsT.jpg
[890299_1323222425UUsT.jpg 1]: /images/20220513/98a4d5ccfe8247de905fa1d7ecf2139f.png
[1369317411_8814.png]: https://img-my.csdn.net/uploads/201305/23/1369317411_8814.png
[1369317411_8814.png_1369317411_8814.png]: /images/20220513/a0f0e1ad962d433898f403fa53bdcdec.png
[1371437543_5793.png]: https://img-my.csdn.net/uploads/201306/17/1371437543_5793.png
[1371437543_5793.png 1]: /images/20220513/912ab88febe14cae9e01cfd648923f27.png
[1380009465_2898.png]: https://img-my.csdn.net/uploads/201309/24/1380009465_2898.png
[1380009465_2898.png 1]: /images/20220513/f1d2f1e5f8214a3b9f8b51d683c7dc32.png
[Link 1]: http://blog.csdn.net/qxs965266509/article/category/1127573
[Java]: http://blog.csdn.net/qxs965266509/article/category/1126659
[Link 2]: http://blog.csdn.net/qxs965266509/article/category/1153457
[Link 3]: http://blog.csdn.net/qxs965266509/article/category/1162589
[android]: http://blog.csdn.net/qxs965266509/article/category/1181381
[Java Web]: http://blog.csdn.net/qxs965266509/article/category/1252625
[Link 4]: http://blog.csdn.net/qxs965266509/article/category/1273637
[Jsp]: http://blog.csdn.net/qxs965266509/article/category/1276380
[Hibernate]: http://blog.csdn.net/qxs965266509/article/category/1306895
[Struts2]: http://blog.csdn.net/qxs965266509/article/category/1352181
[JS]: http://blog.csdn.net/qxs965266509/article/category/1364858
[ajax]: http://blog.csdn.net/qxs965266509/article/category/1364859
[jQuery]: http://blog.csdn.net/qxs965266509/article/category/1372371
[oracle]: http://blog.csdn.net/qxs965266509/article/category/1385562
[spring]: http://blog.csdn.net/qxs965266509/article/category/1403602
[Nodejs]: http://blog.csdn.net/qxs965266509/article/category/1539739
[neo4j]: http://blog.csdn.net/qxs965266509/article/category/1539741
[2014_07]: http://blog.csdn.net/qxs965266509/article/month/2014/07
[2014_03]: http://blog.csdn.net/qxs965266509/article/month/2014/03
[2014_02]: http://blog.csdn.net/qxs965266509/article/month/2014/02
[2013_12]: http://blog.csdn.net/qxs965266509/article/month/2013/12
[2013_11]: http://blog.csdn.net/qxs965266509/article/month/2013/11
[2013_10]: http://blog.csdn.net/qxs965266509/article/month/2013/10
[2013_09]: http://blog.csdn.net/qxs965266509/article/month/2013/09
[2013_08]: http://blog.csdn.net/qxs965266509/article/month/2013/08
[2013_07]: http://blog.csdn.net/qxs965266509/article/month/2013/07
[2013_06]: http://blog.csdn.net/qxs965266509/article/month/2013/06
[2013_05]: http://blog.csdn.net/qxs965266509/article/month/2013/05
[2013_04]: http://blog.csdn.net/qxs965266509/article/month/2013/04
[2013_03]: http://blog.csdn.net/qxs965266509/article/month/2013/03
[2013_02]: http://blog.csdn.net/qxs965266509/article/month/2013/02
[2012_12]: http://blog.csdn.net/qxs965266509/article/month/2012/12
[2012_11]: http://blog.csdn.net/qxs965266509/article/month/2012/11
[2012_10]: http://blog.csdn.net/qxs965266509/article/month/2012/10
[2012_09]: http://blog.csdn.net/qxs965266509/article/month/2012/09
[2012_07]: http://blog.csdn.net/qxs965266509/article/month/2012/07
[2012_06]: http://blog.csdn.net/qxs965266509/article/month/2012/06
[2012_05]: http://blog.csdn.net/qxs965266509/article/month/2012/05
[2012_04]: http://blog.csdn.net/qxs965266509/article/month/2012/04
[2012_03]: http://blog.csdn.net/qxs965266509/article/month/2012/03
[2012_02]: http://blog.csdn.net/qxs965266509/article/month/2012/02
[2011_12]: http://blog.csdn.net/qxs965266509/article/month/2011/12
[2011_11]: http://blog.csdn.net/qxs965266509/article/month/2011/11
[2011_10]: http://blog.csdn.net/qxs965266509/article/month/2011/10