在线演示：http://sandbox.runjs.cn/show/2drrwkrx

关键点：保持一个不变，鼠标拖动时与边框的距离 === 鼠标左击时与边框的距离

源码：

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<title>具备吸附功能的拖曳</title>

	<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/base.css">

	<style>

		.c-box{

			position: absolute;

			top:100px;

			width: 100px;

			height: 100px;

			cursor: move;

			background-color: #9AFF9A;

		}

	</style>

	<script src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script>

</head>

<body>

	<div id="box" class="c-box"></div>

	<script>

		var box = $('#box');

		//鼠标按下

		box.mousedown(function(event) {

			if(event.which==1){ //左击

				var left = box.offset().left,//在当前视口的偏移,可以理解为到最终父级（body,html）的距离，别受到js定位父级		       //offsetparent的影响，与其对应的是jQuery中position()方法

					top = box.offset().top,

					d_x = event.pageX - left,

					d_y = event.pageY - top,

					wx = $(document).outerWidth(),//浏览器可视区域

					wy = $(document).outerHeight(),

					bx = box.width(),

					by = box.height();

				$(document).mousemove(function(event) { //绑定到doucument,防止移动太快脱离鼠标

					var x = event.pageX - d_x,

						y = event.pageY - d_y;

					if(x<40) x = 0;

					else if(wx-x-bx<40)

						x = wx - bx;

					if(y<40) y = 0;

					else if(wy-y-by<40)

						y = wy-by;

					box.css({

						left: x,

						top: y

					});

				});

				$(document).mouseup(function(event) {

					$(document).off('mousemove');

				});

				return false;//防止冒泡

			}

		});

	</script>

</body>

</html>

遇到的问题

（1）window中的top对象，参考资料：http://blog.163.com/zhaoyanping_1125/blog/static/201329153201206105031895/

（2）防止鼠标脱离文本框，讲mouseup,mouseover绑定到doucuemnt

（3）区分offset()方法与position()方法

（4）可以将拖曳封装为通用方法

资料：判断鼠标左击与右击

jQuery学习_具备吸附功能的拖曳框的更多相关文章

  1. 【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？

    我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...

  2. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  3. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  4. jQuery源代码学习_工具函数_type

    jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...

  5. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  6. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. Web应用开发工具及语言需要具备的功能探索

    1 前言 最近一个多月在做Web项目,用到的技术有(也不算泄漏公司机密吧): 后台:Struts 2(with JSP/FreeMarker).Spring.Hibernate.MySQL.Web S ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. Django学习笔记之Django模版系统

    官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特 ...

  2. Mysql 忘记密码处理配置

    Mysql忘记密码处理 1.设置mysql密码 mysqladmin -uroot password ‘密码’ 2.主配置文件下取消密码授权 vim /etc/my.cnf 注:加入skip-gran ...

  3. Ubuntu 14.04上架IPSec+L2TP的方法

    最简单的方法是使用脚本一步一步地进行配置.我用的是philplckthun写的脚本,修改了一下获取服务器IP的方法:脚本文件. 在ubuntu下运行: sh setup.sh 配置配置完成后,服务器端 ...

  4. 20165101刘天野 2017-2018-2 《Java程序设计》 结对编程练习_四则运算（第二周）

    20165101刘天野 2017-2018-2 <Java程序设计> 结对编程练习_四则运算(第二周) 一.需求分析 能随机生成n道四则运算题目,n由使用者输入 支持分数运算 支持多运算符 ...

  5. c语言网络通信杂笔记

    1.sin_addr.s_addr = INADDR_ANY;设置成本地IP 2.pthread_create();线程生成函数 3.在linux下,sleep(1)是睡眠1s

  6. git多站点帐号配置

    事件场景 小明同学是一个非常努力的coder,业余时间都花在了github.com上面,因为公司的台式机性能比较好,小明同学想在公司电脑上面也进行开发.但是github上面的帐号邮箱跟公司分配的帐号邮 ...

  7. MongoDB快速入门（十一）- sort() 方法

    sort() 方法 要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序.要指定排序顺序1和-1. 1用于升序排列, ...

  8. spark学习14（spark local模式运行spark程序的报错）

    报错1 java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries. 解 ...

  9. Sublime Text3 使用记录

    Sublime Text 3 使用记录 来看下本文的大纲吧 介绍下,我的环境      操作系统:win10 64bit      sublime Text  3 版本:3143 那么就开始啦. 一. ...

  10. GO学习笔记：函数作为值、类型

    在Go中函数也是一种变量,我们可以通过type来定义它,它的类型就是所有拥有相同的参数,相同的返回值的一种类型: type typeName func(input1 inputType1 , inpu ...