一、前言

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

DEMO1:http://jsfiddle.net/Jj9qA/4/
DEMO2: http://jsfiddle.net/gUYdg/1/

二、设计思路

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

$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>');
}
});
}());

2014/03/02 源码更新及demo:

$.fn.extend({
/**
* Autor: 博客园华子yjh update 2014/03/02
*/
drag: function(options) {
var dragStart, dragMove, dragEnd, $boundaryElem, b_width, b_height,
limitObj, isBeyond, diffX, diffY, win_width = $(window).width(),
win_height = $(window).height(); function _initOptions() {
var noop = function(){}, defaultOptions; defaultOptions = { // 默认配置项
boundaryElem: 'body', // 边界容器
isLimit: false // 是否限制拖动范围
};
options = $.extend( defaultOptions, options || {} ); // 边界元素及其宽高
$boundaryElem = $(options.boundaryElem);
b_width = $boundaryElem.innerWidth();
b_height = $boundaryElem.innerHeight(); dragStart = options.dragStart || noop,
dragMove = options.dragMove || noop,
dragEnd = options.dragEnd || noop;
} function _drag(e) {
var clientX, clientY, offsetLeft, offsetTop, width, height,
$target = $(this), self = this; // 记录鼠标按下时的位置及拖动元素的相对位置
clientX = e.clientX;
clientY = e.clientY;
offsetLeft = this.offsetLeft;
offsetTop = this.offsetTop; width = $target.outerWidth();
height = $target.outerHeight(); limitObj = {
_left: 0,
_top: 0,
_right: (b_width || win_width) - width,
_bottom: (b_height || win_height) - height
}; // 拖动元素是否超出了限制边界
isBeyound = width > b_width && height > b_height;
if (isBeyound) {
diffX = b_width - width;
diffY = b_height - height;
} dragStart.apply(this, arguments);
$(document).bind('mousemove', moveHandle)
.bind('mouseup', upHandle); // 鼠标移动事件处理
function moveHandle(e) {
var e_diffX = e.clientX - clientX,
e_diffY = e.clientY - clientY,
x = e_diffX + offsetLeft,
y = e_diffY + offsetTop; if (options.isLimit && !isBeyound) {
x = Math.max( Math.min(x, limitObj._right), limitObj._left );
y = Math.max( Math.min(y, limitObj._bottom), limitObj._top );
} if (options.isLimit && isBeyound) {
x = e_diffX < 0 ? Math.max(x, diffX) : Math.min(x, 0);
y = e_diffY < 0 ? Math.max(y, diffY) : Math.min(y, 0);
} $target.css({
left: x + 'px',
top: y + '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){
if ($(this).data('data-resize')) {
return;
}
_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;
}
});

demo:http://jsfiddle.net/aTB2H/

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

  如需转载,请附上本文地址及出处:博客园华子yjh,谢谢!

JavaScript 实现鼠标拖动元素的更多相关文章

  1. Wpf 鼠标拖动元素实例

    1.Wpf中鼠标捕获和释放 //以矩形为例 //创建鼠标捕获 Mouse.Capture(rectOne); //释放鼠标捕获 rectOne.ReleaseMouseCapture(); 2.Wpf ...

  2. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  3. 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  4. Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三(页面滚屏,模拟鼠标拖动滚动条)

    日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...

  5. JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  6. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  7. flex 事件注册和鼠标拖动

    flex 事件注册和鼠标拖动 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...

  8. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  9. javascript 实现图片拖动

    javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...

随机推荐

  1. Linux第五次学习笔记

    处理器体系结构 Y86指令集体系结构 定义一个指令集体系结构 ,包括定义各种状态元素.指令集和它们的编码.一组编程规范和异常事件处理. 程序员可见的状态 Y86程序中的每条指令都会读取或修改处理器状态 ...

  2. 3.SQLAlchemy文档-SQLAlchemy Core(中文版)

    这里的文描述了关于SQLAlchemy的的SQL渲染引擎的相关内容,包括数据库API的集成,事务的集成和数据架构描述服务.与以领域为中心的ORM使用模式相反,SQL表达式语言提供了一个数据构架为中心的 ...

  3. WCF Data Service 使用小结(二) —— 使用WCF Data Service 创建OData服务

    在 上一章 中,介绍了如何通过 OData 协议来访问 OData 服务提供的资源.下面来介绍如何创建一个 OData 服务.在这篇文章中,主要说明在.NET的环境下,如何使用 WCF Data Se ...

  4. Object C学习笔记14-分类(category)

    在.NET中有一个非常带劲的特性,那就是扩展方法. 扩展方法使你能够向现有类型“添加”方法(包括你自定义的类型和对象噢),而无需创建新的派生类型.重新编译或以其他方式修改原始类型.扩展方法是一种特殊的 ...

  5. C#中的yield return与Unity中的Coroutine(协程)(下)

    Unity中的Coroutine(协程) 估计熟悉Unity的人看过或者用过StartCoroutine() 假设我们在场景中有一个UGUI组件, Image: 将以下代码绑定到Image using ...

  6. SQL温故系列两篇(二)

    .Sql 插入语句得到自动生成的递增的ID值 Insert into Table(name,des,num) values(’ltp’,’thisisbest’,10); Select @@ident ...

  7. DOM(八)使用DOM控制表单

    1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中 ...

  8. iOS--雪花掉落特效

    - (void)createAnimaton { // 实例化发射器 CAEmitterLayer *snowLayer = [CAEmitterLayer layer]; // 设置大小 snowL ...

  9. UIToolbar 如何调整里面的按钮位置

    可以在Bar Button Item后面填个Fixed Space Bar Button Item 或者Flexible Space Bar Button Item,然后再在后面加上下一个Bar Bu ...

  10. mysql-5.7.9-winx64 MySQL服务无法启动,服务没有报告任何错误的解决办法

    问题背景 最新解压版本的mysql 解压安装的时候报错 D:\mysql-5.7.9-winx64\bin>net start mysql MySQL 服务正在启动 . MySQL 服务无法启动 ...