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运行机制之this详细介绍
Feb 07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jquery实现拖动效果
Aug 10 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
实例分析javascript中的异步
Jun 02 Javascript
浅谈react useEffect闭包的坑
Jun 08 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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php获取apk包信息的方法
2014/08/15 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python实现代码统计程序
2019/09/19 Python
python小白切忌乱用表达式
2020/05/29 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
可靠的数据流传输TCP
2016/03/15 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
英语教育专业自荐信
2014/05/29 职场文书
主要负责人任命书
2014/06/06 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
幼儿园辞职信
2015/05/13 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
Python进程间的通信之语法学习
2022/04/11 Python