jquery拖动插件

来源:赵克立博客分类: HTML5 标签：js特效发布时间:2014-05-13 22:05:00最后更新:2014-05-17 01:28:34浏览:2568

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/1745.html

更新时间：

2014-05-17 01:28:34

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/Public/static/js/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,mousedown:false};
$.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.mousedown=true;
		//计算鼠标在元素上的坐标并保存状态
		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(data.mousedown){
				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(){
		data.mousedown=false;
		$(this).css('cursor','auto');
		$('#divspace').remove();
		});
}; 
})(jQuery); 




$(function(){
	$('.box').kldrag();
	});
</script>
</body>
</html>

提示：您可以先修改部分代码再运行