亚洲第一综合天堂另类专 ,亚洲狠狠婷婷综合久久久久,亚洲日韩国产二区无码

JQuery之拖拽插件

一直以來，都對(duì)JS獲取元素的位置感到非常的困惑：一會(huì)client、一會(huì)offset、一會(huì)scroll。

再加上各大瀏覽器之間的不兼容，唉，搞得哥暈暈乎乎的。

而很多頁面效果都要用到這些位置。不得已，得練練，得記記。

下面就來說說這個(gè)基于 JQuery的簡易拖拽插件吧。

按慣例，先說說拖拽的原理，以及搞這么一個(gè)東東的步驟：

那什么是拖拽呢？看名字就知道了：就是把一個(gè)東東拖來拽去的。放到我們的DOM上，就是改變它的位置。

它只有兩個(gè)難點(diǎn)：1、如何知道是在拖？ 2、如何知道從哪拖，拖到哪？

其實(shí)，這也算不上難點(diǎn)，畢竟兩者都是基礎(chǔ)的東西，關(guān)鍵在于熟練。

換到j(luò)s 中，我們搞一個(gè)拖拽效果，大致有如下步驟：

1、讓元素捕獲事件（一般情況下，無非就是mousedown、mousemove、mouseup)

2、在mousedown時(shí)，標(biāo)記開始拖拽，并獲取元素及鼠標(biāo)的位置。

3、在mousemove時(shí)，不斷的獲取鼠標(biāo)的新位置，并通過相應(yīng)的位置算法，來重新定位元素位置。

4、在mouseup時(shí)，結(jié)束拖拽。。。然后周而復(fù)始。

這中間，個(gè)需要注意的地方：被拖拽的元素，至少需要相對(duì)或絕對(duì)定位，否則拖拽不會(huì)有效果。

OK，不多說，無代碼，無真相。相應(yīng)的解釋都在其中了：

猛擊下載：

<!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({
            //獲取鼠標(biāo)當(dāng)前坐標(biāo)
            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(){

                //是否正在拖動(dòng)
                var bDraging = false;
                //移動(dòng)的元素
                var moveEle = $(this);
                //點(diǎn)擊哪個(gè)元素，以觸發(fā)移動(dòng)。
                //該元素需要是被移動(dòng)元素的子元素（比如標(biāo)題等）
                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 : 初始時(shí)，鼠標(biāo)與被移動(dòng)元素原點(diǎn)的距離
                // moveX|Y : 移動(dòng)時(shí)，被移動(dòng)元素定位位置 (新鼠標(biāo)位置與initDiffX|Y的差值)
                // 如果定義了移動(dòng)中的回調(diào)函數(shù)，該對(duì)象將以參數(shù)傳入回調(diào)函數(shù)。
                var dragParams = {initDiffX:'',initDiffY:'',moveX:'',moveY:''};

                //被移動(dòng)元素，需要設(shè)置定位樣式，否則拖拽效果將無效。
                moveEle.css({'position':'absolute','left':'0','top':'0'});

                //點(diǎn)擊時(shí)，記錄鼠標(biāo)位置
                //DOM寫法： getElementById('***').onmousedown= function(event);
                focuEle.bind('mousedown',function(e){
                    //標(biāo)記開始移動(dòng)
                    bDraging = true;
                    //改變鼠標(biāo)形狀
                    moveEle.css({'cursor':'move'});
                    //捕獲事件。（該用法，還有個(gè)好處，就是防止移動(dòng)太快導(dǎo)致鼠標(biāo)跑出被移動(dòng)元素之外）
                    if(moveEle.get(0).setCapture)
                    {
                        moveEle.get(0).setCapture();
                    }
                    //（實(shí)際上是鼠標(biāo)當(dāng)前位置相對(duì)于被移動(dòng)元素原點(diǎn)的距離）
                    // 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;
                });

                //移動(dòng)過程
                focuEle.bind('mousemove',function(e){
                    if(bDraging)
                    {
                        //被移動(dòng)元素的新位置，實(shí)際上鼠標(biāo)當(dāng)前位置與原位置之差
                        //實(shí)際上，被移動(dòng)元素的新位置，也可以直接是鼠標(biāo)位置，這也能體現(xiàn)拖拽，但是元素的位置就不會(huì)精確。
                        dragParams.moveX = $.mouseCoords(e).x - dragParams.initDiffX;
                        dragParams.moveY = $.mouseCoords(e).y - dragParams.initDiffY;

                        //是否限定在某個(gè)區(qū)域中移動(dòng).
                        //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]
                            }
                        }

                        //移動(dòng)方向：可以是不限定、垂直、水平。
                        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});
                        }

                        //如果有回調(diào)
                        if(opts.callback)
                        {
                            //將dragParams作為參數(shù)傳遞
                            opts.callback.call(opts.callback,dragParams);
                        }
                    }
                });

                //鼠標(biāo)彈起時(shí)，標(biāo)記為取消移動(dòng)
                focuEle.bind('mouseup',function(e){
                    bDraging=false;
                    moveEle.css({'cursor':'default'});
                    if(moveEle.get(0).releaseCapture)
                    {
                        moveEle.get(0).releaseCapture();
                    }
                });
            });
        };

        //默認(rèn)配置
        $.fn.dragDrop.defaults =
        {
            focuEle:null,            //點(diǎn)擊哪個(gè)元素開始拖動(dòng),可為空。不為空時(shí)，需要為被拖動(dòng)元素的子元素。
            callback:null,            //拖動(dòng)時(shí)觸發(fā)的回調(diào)。
            dragDirection:'all',    //拖動(dòng)方向：['all','vertical','horizontal']
            fixarea:null            //限制在哪個(gè)區(qū)域拖動(dòng),以數(shù)組形式提供[minX,maxX,minY,maxY]
        };

    })(jQuery);

    // test
   $(function(){
        //限定區(qū)域，有回調(diào)函數(shù)。
        $('#dragDiv').dragDrop({fixarea:[0,$('#dragContainer').width()-50,0,$('#dragContainer').height()-50],callback:function(params){
                $('#span1').text('X:'+params.moveX+' Y:'+params.moveY);
        }});
        //默認(rèn)設(shè)置
        $('#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 閱讀(970) 評(píng)論(0) 編輯收藏所屬分類: JavaScript

常用鏈接

留言簿(46)

隨筆分類(476)

隨筆檔案(495)

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 模塊化利器: 一篇文章掌握RequireJS常用知識(shí) JavaScript 標(biāo)準(zhǔn)庫 API 文檔 ECMAScript 6 用javascript與java進(jìn)行RSA加密與解密 HTML5手機(jī)開發(fā)——滾動(dòng)和慣性緩動(dòng) IE console.info等方法不能call、apply調(diào)用的解決方法 10 個(gè)交互式圖形圖表的 jQuery 插件手機(jī)上模仿iphone的頁面平滑滾動(dòng)軸 7 個(gè)簡單實(shí)用的 jQuery 圖片播放器 T.js 是一個(gè)微型的 JavaScript 模板引擎，壓縮后大小只有 400 個(gè)字節(jié) jquery圖片幻燈片制作電子相冊(cè)，jQuery帶有翻頁效果的圖片電子雜志書。支持收藏，翻頁功能的電子相冊(cè)。