JavaScript 實現滑鼠拖動元素執行個體代碼

來源:互聯網
上載者:User

 這篇文章主要介紹了JavaScript 實現滑鼠拖動元素執行個體代碼,需要的朋友可以參考下

一、前言 最開始實現滑鼠拖動元素的目的就是在一個頁面上拖動很多小圓點,用於固定定位,然後在複製HTML,粘貼在頁面的開發代碼中,就是這麼一個功能,實現了很多遍,都沒有做好,不得已採用了jQuery.fn.draggable外掛程式,在接觸一些資料和別人的思路,今天終於把這個拖動功能給完善了,下面就來看看它的實現  二、設計思路 在拖動元素上綁定滑鼠按下事件,在文檔對象中綁定滑鼠移動,滑鼠彈起事件;為什麼不把三個事件都綁定在拖動元素上,這是因為滑鼠移動太快時,滑鼠移動和彈起事件處理常式將不會執行  代碼如下:$target.bind('mousedown', fn); $(document).bind('mousemove', fn).bind('mouseup', fn);   三、源碼實現細節 在實現源碼中有很多需要值得注意的地方: 1、首先在滑鼠按下事件中,當單擊拖動元素中,可能會選擇地區文字,這並不是我們所需要的,解決方案如下:  代碼如下:// 阻止地區文字被選中 for chrome firefox ie9e.preventDefault();// for firefox ie9 || less than ie9window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();  2、如果拖動元素是圖片(img標籤),滑鼠在拖動圖片一小段距離,會出現一個禁止的小提示,即:圖片不能再拖動,這是瀏覽器的預設行為,因此只要阻止瀏覽器預設行為就可以了  代碼如下:e.preventDefault();  3、關於邊界(處理拖動範圍)的問題 一開始實現的代碼如下:  代碼如下:// x,y代表拖動元素將要設定的left,top值,limitObj為拖動地區範圍對象,測試時就發現問題,// 在拖動過程中,拖動對象有時不能直接靠近邊界 if ( x >= limitObj._left && x <= limitObj._right ) {    $target.css({ left: x + 'px' });}if ( y >= limitObj._top && y <= limitObj._bottom ) {    $target.css({ top: y + 'px' });}   進一步思考:為什麼會出現上面問題,原因在於變數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);                // 阻止瀏覽器預設行為(滑鼠在拖動圖片一小段距離,會出現一個禁止的小提示,即:圖片不能再拖動)                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]);                // 阻止地區文字被選中 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>');                    }    });}()); 
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。