javascript代码实例教程-JavaScript 实现鼠标拖动元素

发布时间:2019-02-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript 实现鼠标拖动元素脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 一、前言

 

开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.fn.Draggable插件,在接触一些资料和别人的思路,今天终于把这个拖动功能给完善了,下面就来看看它的实现

 

 

 

 

二、设计思路

 

在拖动元素上绑定鼠标按下事件,在文档对象中绑定鼠标移动,鼠标弹起事件;

为什么不把三个事件都绑定在拖动元素上,这是因为鼠标移动太快时,鼠标移动和弹起事件处理程序将不会执行

 

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

 

$(document)

.bind('mouSEMove', fn)

.bind('mouseup', fn);

 

 

三、码实现细节

 

在实现源码中有很多需要值得注意的地方:

 

1、首先在鼠标按下事件中,当单击拖动元素中,可能会选择区域文字,这并不是我们所需要的,解决方法如下:

 

// 阻止区域文字被选中 for chrome firefox ie9

e.preventDefault();

// for firefox ie9 || less than ie9

window.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 &amp;& 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>');            

        }

    });

}());

复制代码

 

 

PS: 如有描述错误,请帮忙指正,如果你们有不明白的地方也可以发邮件给我,

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript 实现鼠标拖动元素全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript 实现鼠标拖动元素所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。