繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 可以拖动的div实现代码 修正版
- Javascript
- 仿搜狐女人频道FLASH图片切换效果
- JS CSS文章查看系统
- 走出JavaScript初学困境—js初学
- javascript 弹性菜单，垂直的那种
- javascript FormatNumber函数实现方法
- 动态创建的表格单元格中的事件实现代码
- js继承 Base类的源码解析
- javascript 一段代码引发的思考
- 很全的显示阴历（农历）日期的js代码
- 用于判断用户注册时，密码强度的JS代码
- JavaScript Prototype对象
- javascript 表单的友好用户体现
- javascript 方法覆写实例代码
- Javascript 生成指定范围数值随机数
- javascript 自动转到命名锚记
- 捕获关闭窗口的脚本
- 在网页里看flash的trace数据的js类
- JavaScript delete操作符应用实例
- js利用Array.splice实现Array的insert/remove
- JavaScript 私有成员分析
Javascript 中的 jQuery 可以拖动的div实现代码 修正版
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 572 ::
收藏到网摘: n/a
最近研究了一下jQuery，觉得真的是一个很不错的js库，其他的不说，关键是有翔实的文档，这点是非常关键的。 当然，代码使用起来也非常的方便，很多东西就不用自己再去琢磨了。
研究的过程中顺便用jQuery实现了一个div的拖动，代码附于本文结尾。
实现的思路请参考我的可以拖动的DIV（二）一文。
在参考jQuery中文网站中的例子时，我发现他们在div窗口标题栏触发click事件时，将div的位置移上了一些，而mouseup的事件注册在整个div窗口上，这个思路让我很受启发，解决了鼠标移动很快而div不能跟上导致的错误，非常好的解决办法。
另外，请注意事件起泡，在jQuery以及任何实现div拖动的js代码中，事件起泡无疑都是要阻止的。
在jQuery 的bind或者unbind方法中，函数的返回值最好都用false，不信的话，可以试试true。
这个事件起泡的过程在一般代码中我们用stopPropagation方法来阻止。
效果图：
注意文中加载了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>
评论 (0) All
