JavaScript 實現(xiàn)鼠標拖動元素實例代碼

更新時間：2014年02月24日 14:42:04 作者：

這篇文章主要介紹了JavaScript 實現(xiàn)鼠標拖動元素實例代碼,需要的朋友可以參考下

一、前言

最開始實現(xiàn)鼠標拖動元素的目的就是在一個頁面上拖動很多小圓點，用于固定定位，然后在復制HTML，粘貼在頁面的開發(fā)代碼中，就是這么一個功能，實現(xiàn)了很多遍，都沒有做好，不得已采用了jQuery.fn.draggable插件，在接觸一些資料和別人的思路，今天終于把這個拖動功能給完善了，下面就來看看它的實現(xiàn)

二、設計思路

在拖動元素上綁定鼠標按下事件，在文檔對象中綁定鼠標移動，鼠標彈起事件；
為什么不把三個事件都綁定在拖動元素上，這是因為鼠標移動太快時，鼠標移動和彈起事件處理程序將不會執(zhí)行

復制代碼代碼如下:

$target.bind('mousedown', fn);

$(document)
.bind('mousemove', fn)
.bind('mouseup', fn);

三、源碼實現(xiàn)細節(jié)

在實現(xiàn)源碼中有很多需要值得注意的地方：

1、首先在鼠標按下事件中，當單擊拖動元素中，可能會選擇區(qū)域文字，這并不是我們所需要的，解決方法如下：

復制代碼代碼如下:

// 阻止區(qū)域文字被選中 for chrome firefox ie9
e.preventDefault();
// for firefox ie9 || less than ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

2、如果拖動元素是圖片(img標簽)，鼠標在拖動圖片一小段距離，會出現(xiàn)一個禁止的小提示，即：圖片不能再拖動，
這是瀏覽器的默認行為，因此只要阻止瀏覽器默認行為就可以了

復制代碼代碼如下:

e.preventDefault();

3、關于邊界(處理拖動范圍)的問題

一開始實現(xiàn)的代碼如下：

復制代碼代碼如下:

// x,y代表拖動元素將要設置的left,top值，limitObj為拖動區(qū)域范圍對象，測試時就發(fā)現(xiàn)問題，
// 在拖動過程中，拖動對象有時不能直接靠近邊界

if ( x >= limitObj._left && x <= limitObj._right ) {
$target.css({ left: x + 'px' });
}
if ( y >= limitObj._top && y <= limitObj._bottom ) {
$target.css({ top: y + 'px' });
}

進一步思考：為什么會出現(xiàn)上面問題，原因在于變量x可能會小于limitObj._left或大于limitObj._right，變量y同理，
因此代碼需要像下面這樣處理：

復制代碼代碼如下:

if (x < limitObj._left) {
    x = limitObj._left;
}
if (x > limitObj._right) {
    x = limitObj._right;
}
if (y < limitObj._top) {
    y = limitObj._top;
}
if (y > limitObj._bottom) {
    y = limitObj._bottom;
}
$target.css({ left: x + 'px', top: y + 'px' });

終于解決了這個問題，但是cloudgamer給出了更好的寫法：

復制代碼代碼如下:

$target.css({
    left: Math.max( Math.min(x, limitObj._right),  limitObj._left) + 'px',
    top: Math.max( Math.min(y, limitObj._bottom),  limitObj._top) + 'px'
});

完整程序源碼：

復制代碼代碼如下:

$.fn.extend({
    /**
     *   Autor: 博客園華子yjh 2014/02/21
     */
    drag: function(options) {
        var dragStart, dragMove, dragEnd,
            $boundaryElem, limitObj;

function _initOptions() {
var noop = function(){}, defaultOptions;

            defaultOptions = { // 默認配置項
                boundaryElem: 'body' // 邊界容器
            };
            options = $.extend( defaultOptions, options || {} );
            $boundaryElem = $(options.boundaryElem);

            dragStart = options.dragStart || noop,
            dragMove = options.dragMove || noop,
            dragEnd = options.dragEnd || noop;
        }

        function _drag(e) {
            var clientX, clientY, offsetLeft, offsetTop,
                $target = $(this), self = this;

            limitObj = {
                _left: 0,
                _top: 0,
                _right: ($boundaryElem.innerWidth() || $(window).width()) - $target.outerWidth(),
                _bottom: ($boundaryElem.innerHeight() || $(window).height()) - $target.outerHeight()
            };

            // 記錄鼠標按下時的位置及拖動元素的相對位置
            clientX = e.clientX;
            clientY = e.clientY;
            offsetLeft = this.offsetLeft;
            offsetTop = this.offsetTop;

            dragStart.apply(this, arguments);
            $(document).bind('mousemove', moveHandle)
                        .bind('mouseup', upHandle);

            // 鼠標移動事件處理
            function moveHandle(e) {
                var x = e.clientX - clientX + offsetLeft;
                var y = e.clientY - clientY + offsetTop;

                $target.css({
                    left: Math.max( Math.min(x, limitObj._right), limitObj._left) + 'px',
                    top: Math.max( Math.min(y, limitObj._bottom), limitObj._top) + 'px'
                });

                dragMove.apply(self, arguments);
                // 阻止瀏覽器默認行為(鼠標在拖動圖片一小段距離，會出現(xiàn)一個禁止的小提示，即：圖片不能再拖動)
                e.preventDefault();
            }

            // 鼠標彈起事件處理
            function upHandle(e) {
                $(document).unbind('mousemove', moveHandle);
                dragEnd.apply(self, arguments);
            }
        }

_initOptions(); // 初始化配置對象

        $(this)
        .css({ position: 'absolute' })
        .each(function(){
            $(this).bind('mousedown', function(e){
                _drag.apply(this, [e]);
                // 阻止區(qū)域文字被選中 for chrome firefox ie9
                e.preventDefault();
                // for firefox ie9 || less than ie9
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            });
        });
        return this;
    }
});

實例調用：

復制代碼代碼如下:

// 調用實例
(function(){
    $('.drag-elem').drag({
        boundaryElem: '#boundary',
        dragStart: function(){
            $(this).html('<span>準備拖動</span>').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        dragMove: function(){
            var pos = $(this).position();
            $(this).html('<span>拖動中(' +  pos.left + ',' + pos.top + ')</span>' );
        },
        dragEnd : function(){
            $(this).html('<span>拖動結束</span>');            
        }
    });
}());

您可能感興趣的文章:

js網頁中隨意拖動的小方塊實現(xiàn)代碼
用CSS和JS制作的在網頁中可以隨意拖動的小方塊。
2008-08-08
JS隨即打亂數組實現(xiàn)代碼
使用javascript過程中，偶爾會用到數值，而且是打亂后的數值，本文將介紹一種高效打亂數組的方法,需要的朋友可以參考下
2012-12-12
JavaScript中forEach的錯誤用法匯總
js中foreach是用于遍歷數組的方法,將遍歷到的元素傳遞給回調函數,遍歷的數組不能是空的要有值,下面這篇文章主要給大家介紹了關于JavaScript中forEach的錯誤用法,需要的朋友可以參考下
2022-06-06
多瀏覽器兼容的右下角廣告代碼（已測）
支持FIREFOX IE7 IE6 周未就為了這個小效果，折騰死人了！找了很多的代碼都不行，不是不支持FIREFOX，就是對HTML和XHTML有要求！
2008-04-04
三分鐘帶你快速學會微信小程序的條件渲染
所謂的條件渲染就是判斷是否需要把代碼渲染到展示頁面上,下面這篇文章主要給大家介紹了關于微信小程序條件渲染的相關資料,文中通過實例代碼和圖文介紹的非常詳細,需要的朋友可以參考下
2022-08-08
最短的IE判斷代碼
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出來的。
2011-03-03
JavaScript Event學習第二章 Event瀏覽器兼容性
在這一章我將對重要的事件做一個概述，包括一些流行的瀏覽器的兼容性問題。
2010-02-02
Javascript實現(xiàn)漢字和拼音互轉的終極方案
網上關于JS實現(xiàn)漢字和拼音互轉的文章很多，但是比較雜亂，有的不支持多音字、不支持聲調或者字典文件太大，無法根據實際需要滿足需求。這篇文章給大家修正整理網上的幾種常見方法，文章結尾還附簡單的JS拼音輸入法，本文對大家具有一定的參考借鑒價值，下面一起看看吧。
2016-10-10
JavaScript遞歸操作實例淺析
這篇文章主要介紹了JavaScript遞歸操作,由一個階乘問題開始分析了遞歸操作的原理、實現(xiàn)方法與相關注意事項,需要的朋友可以參考下
2016-10-10
javascript實現(xiàn)了照片拖拽點擊置頂的照片墻代碼
這篇文章主要介紹了javascript實現(xiàn)了照片拖拽點擊置頂的照片墻代碼，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04