求一个使用jQuery插件,实现一个页面的DIV层拖拽
发布网友
发布时间：2022-04-26 12:15
我来回答
共1个回答
热心网友
时间：2022-04-20 07:32
我前几天写了个..放我QQ空间了..你可以自己去看看...实现一个层的拖动..你可以参考下..呵呵.如果不嫌弃的话.代码还是很好理解的..
http://zhug2009.qzone.qq.com/
<html>
<head>
<title>无标题文档</title>
<script src="../jquery-1.2.1.js"></script>
<script>
(function($){
$.fn.drag_div=function(event){
return this.mousedown(function(event){
//当鼠标点击时鼠标的坐标-被拖动元素的left
var x=event.pageX-parseInt($(this).css('left'));
//当鼠标点击时鼠标的坐标-被拖动元素的top
var y=event.pageY-parseInt($(this).css('top'));
//点击不放开鼠标移动鼠标时触发事件
$(this).mousemove(function(event){
//移动鼠标时，层的left和top,width,height
var _x=parseInt($(this).css('left'));
var _y=parseInt($(this).css('top'));
var width=parseInt($(this).width());
var height=parseInt($(this).height());
//当鼠标的坐标在层内部时.为了解决快速移动鼠标而出现的bug
//if(event.pageX>_x && event.pageX<(_x+width) && event.pageY>_y && event.pageY<(_y+height)){
//var pagex=event.pageX;
//var pagey=event.pageY;
//var now_x=event.pageX-x;
//var now_y=event.pageY-y;
$(this).css({left:now_x,top:now_y});
//else解绑事件
//}
//else{
// $(this).unbind('mousemove');
//}
});
//鼠标弹起解绑事件
}).mouseup(function(){
$(this).unbind('mousemove');
});
};
})(jQuery);
$(function(){
$('#drag').drag_div(event);
});
</script>
<style>
#drag{
border:2px solid #000;
background:#6633FF;
width:200px;
height:200px;
cursor:move;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
这只是一个层的拖动..你应该看的懂原理的..稍微改改可以变成你想要的...
