jQuery学习_具备吸附功能的拖曳框
在线演示：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学习_具备吸附功能的拖曳框的更多相关文章
- 【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？
我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码 如下: <!DOCTYPE html> <html> <head> <me ...
- jQuery学习(五)——使用JQ完成复选框的全选和全不选
1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...
- jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- Web应用开发工具及语言需要具备的功能探索
1 前言 最近一个多月在做Web项目,用到的技术有(也不算泄漏公司机密吧): 后台:Struts 2(with JSP/FreeMarker).Spring.Hibernate.MySQL.Web S ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
随机推荐
- get app id
Install Download the Web AppBuilder for ArcGIS (Developer Edition) ZIP file to your local drive and ...
- JavaScript消息机制入门篇
JavaScript这个语言本身就是建立在一种消息机制上的,所以它很容易处理异步回调和各种事件.这个概念与普通的编程语言基础是不同的,所以让很多刚接触JavaScript的人摸不着头脑.JavaScr ...
- 实验三 敏捷开发与XP实践 实验报告 20162305李昱兴
实验三 敏捷开发与XP实践 实验报告 20162305 一.什么是敏捷开发与XP 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法.敏捷开发以用户的需求进化为核 ...
- CentOS6、7LVM扩容
简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现 ...
- iOS日常学习 - 让你的 Xcode8 继续使用插件
本文转载,原文链接 随着 iOS10 的正式版即将发布,Xcode8 GM 也在发布会后放出,本文不会涉及到 Xcode8 有哪些更新,而是记录了如何让 Xcode8 继续支持 Plugin. 相信各 ...
- Spring Boot 中配置切换
步骤一:切换需求 有时候在本地测试是使用8080端口(默认端口),可是上线时使用的比如是9090端口(不常用的,以防被黑). 此时就可以通过多配置文件实现多配置支持与灵活切换. 步骤二:多配置文件 3 ...
- RAID独立冗余磁盘阵列
独立冗余磁盘阵列(Redundant Array OF Independent Disks,RAID)开始于20世纪80年代美国加州大学伯克利分校的一个研究项目,当时RAID被称为廉价冗余磁盘阵列(R ...
- linux 终端分屏命令
比如:某文件夹下有文件:vector.cc, substr.cc 1.使用vim命令打开任意一个文件:vim vector.cc打开第一个文件.如下图所示: 2.按:"Esc"键 ...
- Windows 10 操作系统删除Administrator登录选项
在win10操作系统锁屏界面登录选项中突然出现了两个用户选项,一个是自己微软账户登录的用户,另一个是Administrator登录选项,每次看到好别扭,怎么去掉呢? 一.以管理员身份运行命令提示符(c ...
- 理解Java中字符流与字节流的区别（转）
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...