元素JS拖动的实现
涉及到了几个位置的属性
offset clientX cilentY 等
$(selector).on("mousedown",function (e){
var x = e.clientX - $("#mod").offset().left;
var y = e.clientY - $("#mod").offset().top;
document.onmousemove = function (e) {
$("#mod").css({"left": e.clientX - x + "px"});
$("#mod").css({"top": e.clientY - y + "px"});
}
document.onmouseup = function () {
document.onmousemove = null;
}
})
元素JS拖动的实现的更多相关文章
- HTML5 元素拖动 - 实现元素左右拖动, 或更改自身排序
1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Int ...
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- three.js 使用DragControls.js 拖动元素
首先,引入js文件: <script type="text/javascript" src="./path/to/DragControls.js"> ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- jQuery插件EasyDrag轻松实现JS拖动的效果
jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- 自己封装的一个原生JS拖动方法。
代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...
- js拖动层原形版
脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
随机推荐
- Apache+Tomcat构建Tomcat负载均衡集群
一.环境介绍 二.安装后端服务器 三.安装前端Apache服务 四.配置Apache使用mod_jk模块实现代理及负载均衡 五.配置Apache基于mod_proxy模块实现代理及负载均衡 六.论坛安 ...
- 升级设置win2008r2开发环境,遇到问题小结
升级设置2008r2开发环境,是一般程序员经历的事情.许多从vs 2003,vs2005+sql2000+win2003过来,但是,时间推移,技术革新,64位的推行.架构的变化和强大.我们也只可以学习 ...
- C#中的IntPtr类型
本文转自:http://zhidao.baidu.com/question/22825956.html 问: c#中无法将类型“int”隐式转换为“System.IntPtr” 这个是我引用了一个ap ...
- HTMl5-canvas 入门级复习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UVA 10816 + HDU 1839 Dijstra + 二分 (待研究)
UVA 题意:两个绿洲之间是沙漠,沙漠的温度不同,告诉起点,终点,求使得从起点到终点的最高温度最小的路径,如果有多条,输出长度最短的路径: 思路:用最小费用(最短路径)最大流(最小温度)也能搞吧,但因 ...
- Python UDP broadcast PermissionError: [Errno 13] Permission denied
/********************************************************************** * Python UDP broadcast Permi ...
- java.lang.ClassNotFoundException: Didn't find class "*****(转载)
很多人出现了java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{*****Activity}: java. ...
- struts2 ajax的一种实现方式
/** * ajax请求,通过省份id获取学习中心 */ public void getSitesByPid() { HttpServletResponse response = ServletAct ...
- 转: MySQL 赋予用户权限(grant %-远程和localhost-本地区别)
相关参考资料: MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. gr ...
- Bean的定义及作用域的注解实现
1. Classpath扫描与组件管理 从Spring3.0开始,Spring JavaConfig项目提供了很多特性,包括使用java而不是XML定义bean. 比如@configuration, ...