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里使用Dom操作Xml
Sep 20 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
jquery实现轮播图特效
Apr 12 jQuery
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 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 APC缓存配置、使用详解
2014/03/06 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
CI框架常用函数封装实例
2016/11/21 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
javascript 函数调用规则
2009/08/26 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
给男朋友的道歉信
2014/01/12 职场文书
优秀班组事迹材料
2014/12/24 职场文书
成本会计岗位职责
2015/02/03 职场文书
网络妈妈观后感
2015/06/08 职场文书
法制教育观后感
2015/06/17 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Python实现打乒乓小游戏
2021/09/25 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js