jQuery 可以拖动的div实现代码 脚本之家修正版


Posted in Javascript onJune 26, 2009

当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了。
研究的过程中顺便用jQuery实现了一个div的拖动,代码附于本文结尾。
实现的思路请参考我的可以拖动的DIV(二)一文。
在参考jQuery中文网站中的例子时,我发现他们在div窗口标题栏触发click事件时,将div的位置移上了一些,而mouseup的事件注册在整个div窗口上,这个思路让我很受启发,解决了鼠标移动很快而div不能跟上导致的错误,非常好的解决办法。
另外,请注意事件起泡,在jQuery以及任何实现div拖动的js代码中,事件起泡无疑都是要阻止的。
在jQuery 的bind或者unbind方法中,函数的返回值最好都用false,不信的话,可以试试true。
这个事件起泡的过程在一般代码中我们用stopPropagation方法来阻止。
效果图:
jQuery 可以拖动的div实现代码 脚本之家修正版
注意文中加载了jquery-1.2.6.js

<script language="javascript" type="text/javascript" src="jquery-1.2.6.js"></script> 
<style type="text/css"> 
<!? 
body { 
background-color: #333333; 
} 
.win{ 
position:absolute; 
top:0px; 
left:0px; 
width:300px; 
height:222px; 
} 
.title{ 
height:20px; 
width:300px; 
position:absolute; 
background-color:#666666; 
float:inherit; 
top:0px; 
left:0px; 
background-image:url(bgo.gif); 
} 
.winCon{ 
height:200px; 
width:298px; 
position:absolute; 
border:solid; 
border-width:1px; 
border-color:#666666; 
border-top:none; 
float:inherit; 
left:0px; 
top:20px; 
} 
?> 
</style> 
<a href="#" onclick="addDiv(this,'asd');">asgfsdg</a> 
<a href="#" id="zxca" onclick="addDiv(this,'zxc');">asgfsdg</a> 
<script language="javascript" type="text/javascript"> 
function addDiv(element,str){ 
$(document.body).append("<div class='win' id='win"+str+"‘><div class='title' id='"+str+"‘></div><div class='winCon'>asfsdgfsdgsd</div></div>"); 
$("#"+str).mousedown(function(event){ 
var offset = $(this).offset(); 
_x=event.clientX-offset.left; 
_y=event.clientY+20-offset.top; 
$("#win"+str).css({"top":offset.top-20+"px"}); 
$("#win"+str).mousemove(function(event){ 
_xx=event.clientX-_x; 
_yy=event.clientY-_y; 
this.style.left=_xx+"px"; 
this.style.top=_yy+"px"; 
this.style.zIndex="100″; 
return false; 
}); 
return false; 
}); 
$("#win"+str).mouseup(function(){ 
$(this).unbind("mousemove"); 
$(this).css({"z-index":"-1″}); 
return false; 
}); 
element.removeEventListener("click",true); 
} 
</script>
Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
Require.JS中的几种define定义方式示例
Jun 01 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
实用的Vue开发技巧
May 30 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 #Javascript
javascript 读取图片文件的大小
Jun 25 #Javascript
JQuery 入门实例1
Jun 25 #Javascript
JavaScript 开发中规范性的一点感想
Jun 23 #Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 #Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 #Javascript
一些常用的JS功能函数代码
Jun 23 #Javascript
You might like
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JS中的作用域链
2017/03/01 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
Python实现图片添加文字
2019/11/26 Python
简单了解Python write writelines区别
2020/02/27 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
win10安装python3.6的常见问题
2020/07/01 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
酒店司机岗位职责
2013/12/14 职场文书
先进个人获奖感言
2014/01/24 职场文书
员工拓展培训方案
2014/02/15 职场文书
幼师求职自荐信
2014/05/31 职场文书
验房委托书
2014/08/30 职场文书