JQuery之拖拽插件 -

oywl2008

浏览: 1051891 次
性别:
来自: 广州

最近访客更多访客>>

panghu

wangyy

qjl26

chyanog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery之拖拽插件

博客分类：

Html & Javasctipt

一直以来，都对JS获取元素的位置感到非常的困惑：一会client、一会offset、一会scroll。

再加上各大浏览器之间的不兼容，唉，搞得哥晕晕乎乎的。

而很多页面效果都要用到这些位置。不得已，得练练，得记记。

下面就来说说这个基于 JQuery的简易拖拽插件吧。

按惯例，先说说拖拽的原理，以及搞这么一个东东的步骤：

那什么是拖拽呢？看名字就知道了：就是把一个东东拖来拽去的。放到我们的DOM上，就是改变它的位置。

它只有两个难点：1、如何知道是在拖？ 2、如何知道从哪拖，拖到哪？

其实，这也算不上难点，毕竟两者都是基础的东西，关键在于熟练。

换到js 中，我们搞一个拖拽效果，大致有如下步骤：

1、让元素捕获事件（一般情况下，无非就是mousedown、mousemove、mouseup)

2、在mousedown时，标记开始拖拽，并获取元素及鼠标的位置。

3、在mousemove时，不断的获取鼠标的新位置，并通过相应的位置算法，来重新定位元素位置。

4、在mouseup时，结束拖拽。。。然后周而复始。

这中间，个需要注意的地方：被拖拽的元素，至少需要相对或绝对定位，否则拖拽不会有效果。

OK，不多说，无代码，无真相。相应的解释都在其中了：

猛击下载：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Jeremy  -  DragDrop Test !</title>

(function($)

{

$.extend({

//获取鼠标当前坐标

mouseCoords:function(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop  - document.body.clientTop

};

//获取样式值

getStyle:function(obj,styleName)

{
		return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null)[styleName];
//                return obj.currentStyle ? obj.currentStyle[styleName] : document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleName);
            }

});

// 元素拖拽插件
        $.fn.dragDrop = function(options)
	{
		var opts = $.extend({},$.fn.dragDrop.defaults,options);
		return this.each(function(){
			//是否正在拖动
	                var bDraging = false;

//移动的元素
	                var moveEle = $(this);
			//点击哪个元素，以触发移动。

//该元素需要是被移动元素的子元素（比如标题等）
	                var focuEle = opts.focuEle ? $(opts.focuEle,moveEle) : moveEle ;
			if(!focuEle || focuEle.length<=0)
			{
				alert('focuEle is not found! the element must be a child of '+this.id);
				return false;
			}

// initDiffX|Y : 初始时，鼠标与被移动元素原点的距离
	                // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与initDiffX|Y的差值)
	                // 如果定义了移动中的回调函数，该对象将以参数传入回调函数。
	                var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};

//被移动元素，需要设置定位样式，否则拖拽效果将无效。
	                moveEle.css({'position':'absolute','left':'0','top':'0'});
			//点击时，记录鼠标位置

//DOM写法： getElementById('***').onmousedown= function(event);
	                focuEle.bind('mousedown',function(e){

//标记开始移动
	                    bDraging = true;
			        //改变鼠标形状
	                    moveEle.css({'cursor':'move'});

//捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
	                    if(moveEle.get(0).setCapture)
			    {  
				moveEle.get(0).setCapture();

}

//（实际上是鼠标当前位置相对于被移动元素原点的距离）

// DOM写法：(ev.clientX + document.body.scrollLeft - document.body.clientLeft) - document.getElementById('***').style.left;

dragParams.initDiffX = $.mouseCoords(e).x - moveEle.position().left;

dragParams.initDiffY = $.mouseCoords(e).y - moveEle.position().top;

});

//移动过程
	                focuEle.bind('mousemove',function(e){
				if(bDraging)
				{    
					//被移动元素的新位置，实际上鼠标当前位置与原位置之差

//实际上，被移动元素的新位置，也可以直接是鼠标位置，这也能体现拖拽，但是元素的位置就不会精确。

dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;

dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;
					//是否限定在某个区域中移动.
		                        //fixarea格式: [x轴最小值,x轴最大值,y轴最小值,y轴最大值]
		                        if(opts.fixarea)
					{	
						if(dragParams.moveX<opts.fixarea[0])

{
							dragParams.moveX=opts.fixarea[0]

}
						if(dragParams.moveX>opts.fixarea[1])
						{
							dragParams.moveX=opts.fixarea[1]
						}
						if(dragParams.moveY<opts.fixarea[2])
						{

dragParams.moveY=opts.fixarea[2]
						}
						if(dragParams.moveY>opts.fixarea[3])
						{
							dragParams.moveY=opts.fixarea[3]
						}

}

//移动方向：可以是不限定、垂直、水平。
		                        if(opts.dragDirection=='all')
					{
						//DOM写法： document.getElementById('***').style.left = '***px'; 
			                            moveEle.css({'left':dragParams.moveX,'top':dragParams.moveY});
					}
					else if (opts.dragDirection=='vertical')
					{
						moveEle.css({'top':dragParams.moveY});
					}
					else if(opts.dragDirection=='horizontal')
					{
						moveEle.css({'left':dragParams.moveX});
					}
					//如果有回调
		                        if(opts.callback)

{
						//将dragParams作为参数传递
			                            opts.callback.call(opts.callback,dragParams);
					}
				}

});

//鼠标弹起时，标记为取消移动

focuEle.bind('mouseup',function(e){
				bDraging=false;
				moveEle.css({'cursor':'default'});
				if(moveEle.get(0).releaseCapture)
				{
					moveEle.get(0).releaseCapture();
				}
			});

});
	};
	//默认配置

$.fn.dragDrop.defaults = 
	{
		focuEle:null,            //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。

callback:null,            //拖动时触发的回调。
                dragDirection:'all',    //拖动方向：['all','vertical','horizontal']
                fixarea:null            //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]

};

})(jQuery);

// test

$(function(){

//限定区域，有回调函数。

$('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
	$('#span1').text('X:'+params.moveX+' Y:'+params.moveY);

}});

//默认设置

$('#dragDiv1').dragDrop();

});

</script>

</head>

<body>

</div>

</div>
</div>

</html>

按 Ctrl+C 复制代码

<h3>
心静似高山流水不动，心清若巫峰雾气不沾。
</h3>

link: http://www.cnblogs.com/McJeremy/archive/2011/04/14/2016398.html

分享到：

js本地存储解决方案(localStorage与userDa ... | What is Middleware?

2012-03-12 10:22
浏览 963
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery之拖拽插件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery之拖拽插件

评论

发表评论

相关推荐

ECMAScript 6 Babel

Javascript模块化编程（一）：模块的写法

CommonJS Modules/1.0 规范

测试框架 Mocha 实例教程

Node.js Tutorial for Beginners

The MVC and MVVM Patterns

10 Reasons Why You Should Use AngularJS

Angularjs JS Parse JSON

JavaScript == === 区别

angularjs

AngularJS 视频教程

Bootstrap Get Started 前台框架 可以适应多种平台

零基础学HTML 5实战开发(第一季)

show or hidden DIV

总结：JSP页面img图片缓存问题现象表述及问题解决

JS print

javascript create html table

jQuery Validation Plugin

For 语训中心

IE input file fakepath solution

最近访客更多访客>>

Bootstrap Get Started 前台框架可以适应多种平台