繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 可以拖动的div实现代码 修正版
- Javascript
- javascript之循环停顿上下滚动
- textarea保留换行的注意事项
- 不错的一篇关于javascript-prototype继承
- 非常不错的三种简洁的Tab导航（网页选项卡）简析
- 一个用js实现控制台控件的代码
- 【消息提示组件】，兼容IE6/7&&FF2
- 一个符号插入器 中用到的js代码
- js中的escape及unescape函数的php实现代码
- 用javascript实现画板的代码
- 比较实用的复选框的实用javascript脚本
- js下获得单选框的值的代码
- IE不出现Flash激活框的小发现的js实现方法
- 超强的IE背景图片闪烁(抖动)的解决办法
- “不能执行已释放的Script代码”错误的原因及解决办法
- javascript下过滤数组重复值的代码
- javascript在firefox下设为首页的代码
- 一直都需要的复制到系统剪贴板之IE,firefox兼容版
- js类中获取外部函数名的方法与代码
- JS类定义原型方法的两种实现的区别评论很多
- 一实用的实现table排序的Javascript类库
Javascript 中的 jQuery 可以拖动的div实现代码 修正版
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 629 ::
收藏到网摘: 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
