posts - 496,comments - 227,trackbacks - 0

一直以来,都对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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="keywords" content="Javascript自由拖拽类" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
   (
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 id="dragContainer" style="position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height:500px;">

      
<div id="dragDiv" style="background-color:blue;height:50px;width:50px;">
      
</div>
      
<div id="dragDiv1" style="border:1px solid red;height:50px;width:50px;">
      
</div>

    
</div>

      
<span id="span1"></span>
</body>
</html>
posted on 2011-09-28 17:47 SIMONE 阅读(889) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。


网站导航: