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）可以将拖曳封装为通用方法

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

转载于:https://www.cnblogs.com/yunxianli/p/4111958.html

jQuery学习_具备吸附功能的拖曳框相关推荐

qq html制作,jquery学习练习：制作QQ简易聊天框
使用html( )获取和设置页面内容使用val( )获取聊天内容使用addClass( )为指定元素追加样式使用数组保存聊天人员头像和昵称使用随机函数获取聊天人员的头像和昵称在输入框中输入内 ...
一款外语学习App需要具备哪些功能
随着社会压力的不断增大,很多家长都希望孩子能掌握一门外语,以便以后可以找到更好的工作.但是语言学习也需要很好的语言环境,家庭环境的影响也起着至关重要的作用.相比较传统的学习模式,线上学习不仅便捷,同时 ...
什么是物联网网关？物联网网关具备什么功能？_转
参考:什么是物联网?物联网产业链体系深度分析随着物联网概念的不断深入,商业级的网络应用遍地开花,各种智能家电层出不穷,改善着我们的生活.与此同时,物联网网关也将成为连接的重要纽带.作为网关设备,物联 ...
游戏开发需要具备哪些技术_生鲜小程序需要具备哪些功能板块？生鲜小程序开发...
线上生鲜小程序开发让用户购买蔬菜水果更加便捷,不仅可以有利于发展生鲜行业之后的规模,而且也能够吸引更多的用户,低成本获客.那么,这样一款生鲜小程序需要具备哪些功能板块呢? 线上生鲜小程序需要具备什么? ...
java实现团购功能_[Java教程]jquery组件团购倒计时功能
[Java教程]jquery组件团购倒计时功能 0 2014-05-12 12:00:04 本文网址:http://www.shaoqun.com/a/90954.html *特别声明:以上内容来自于 ...
老人机应用_每日佳软:老人机应该具备什么功能？
虽然全民已经进入智能机时代,但是别忘了还有一群特殊群体还与智能设相隔绝,这就是我们的父辈和祖辈.对于老年人而言,智能手机一是不会用,二是用不着,因此想要把智能手机的功能有效的结合到老人手机中都需要细心 ...
好用的数据填报系统应该具备什么功能？_光点科技
数据填报系统这个现如今每个企业差不多都会接触的系统,已经不是什么高大上的存在了,很多人的日常已经和这些数据报表结合在了一起,而无法分割.比如昨天的营收数据,销售的策略指定等,这些都是依赖数据分析,从而 ...
游戏开发需要具备哪些技术_小程序商城开发具备哪些功能？
小程序商城开发具备哪些功能?河南互金网络科技有限公司业务范围包括:软件开发.app开发.微信开发.网站建设.微信小程序开发等.在网站开发.APP开发.ERP以及大型软件开发方面积累了丰富的项目经验和技 ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
STL学习_配接器篇
STL学习_配接器篇定义配接器(Adapter)在STL组件的灵活组合运用功能上,扮演着轴承.转换器的角色.它事实上是一种设计模式.即将一个class的接口转换为另一个class的接口,使原本因接 ...

jQuery学习_具备吸附功能的拖曳框

jQuery学习_具备吸附功能的拖曳框相关推荐

最新文章

热门文章