JavaScript 实现鼠标拖动元素实例代码


Posted in Javascript onFebruary 24, 2014

一、前言

最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制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 && 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>');            
        }
    });
}());
Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
对table和ul实现js分页示例分享
Feb 24 #Javascript
jquery.post用法之type设置问题
Feb 24 #Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 #Javascript
js获得页面的高度和宽度的方法
Feb 23 #Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 #Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 #Javascript
js 金额格式化来回转换示例
Feb 23 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
javascript中常用编程知识
2013/04/08 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
python写日志封装类实例
2015/06/28 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python交互模式基础知识点学习
2020/06/18 Python
python中get和post有什么区别
2020/06/19 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
大专自我鉴定范文
2013/10/23 职场文书
会计专业的自荐信
2013/12/12 职场文书
超市采购员岗位职责
2014/02/01 职场文书
群众路线党课主持词
2014/04/01 职场文书
爱与责任演讲稿
2014/05/20 职场文书
教书育人演讲稿
2014/09/11 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript