jquery插件拖动div层学习
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2016-12-11 15:22:55
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.box{ width:200px; height:200px; background:#f00;}
</style>
</head>
<body>
<div class="box"></div>
<script>
(function($) {
var data={_x:0,_y:0};
$.fn.kldrag = function(options) {
var defaults={
'titleheight':50,//拖拉标题的有效区域高度,为0时整个都可以拉动
'space':true,//是否要占位div
'spacestyle':''//点位空间样式
};
var opts = $.extend(defaults, options);
this.bind('mousedown',function(e){
//取元素到页面top和left上的坐标
var xxx=$(this).offset().left;
var yyy=$(this).offset().top;
//计算鼠标在元素上的坐标并保存状态
data._x=e.pageX-xxx;//鼠标在元素上的x位置
data._y=e.pageY-yyy;//鼠标在元素上的y位置
//判断是不是在拖动的有效范围内
if(opts.titleheight===0 || opts.titleheight>=data._y){
$(this).css({zIndex:1000,position:'absolute',left:xxx+'px',top:yyy+'px'});
//判断是不是要占位div
if(opts.space){
$('#divspace').remove();
$(this).after('<div id="divspace" style="z-index:999;position:absolute;left:'+xxx+'px;top:'+yyy+'px;width:'+$(this).outerWidth()+'px;height:'+$(this).outerHeight()+'px;border:dashed 1px #f00;'+opts.spacestyle+'"></div>');
}
$(this).css('cursor','move');
}
});
this.bind('mousemove',function(e){
//判断是不是在拖动的有效范围内
if(opts.titleheight===0 || opts.titleheight>=data._y){
if(e.which===1){
xx=e.pageX-(data._x);//鼠标在元素上的x位置
yy=e.pageY-(data._y);//鼠标在元素上的y位置
$(this).css({zIndex:1000,position:'absolute',left:xx+'px',top:yy+'px'});
}
}
});
this.bind('mouseup',function(){
$(this).css('cursor','auto');
$('#divspace').remove();
});
};
})(jQuery);
$(function(){
$('.box').kldrag();
});
</script>
</body>
</html>
