涉及到了几个位置的属性

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拖动的实现的更多相关文章

  1. HTML5 元素拖动 - 实现元素左右拖动, 或更改自身排序

    1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Int ...

  2. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

  3. three.js 使用DragControls.js 拖动元素

    首先,引入js文件: <script type="text/javascript" src="./path/to/DragControls.js"> ...

  4. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  5. jQuery插件EasyDrag轻松实现JS拖动的效果

    jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...

  6. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  7. 自己封装的一个原生JS拖动方法。

    代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...

  8. js拖动层原形版

    脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...

  9. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

随机推荐

  1. Enable SSHD on Ubuntu

    https://help.ubuntu.com/community/SSH/OpenSSH/Configuring

  2. iOS去除导航栏和tabbar的横线

    导航[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetri ...

  3. animate.css总结

    本文对animate.css的各个效果进行总结 bounce 从上掉落,在地上小幅度跳起 <!DOCTYPE html> <meta charset="utf-8" ...

  4. javascript笔记8-表单脚本、JSON、AJAX

    通过表单提交,很方便的可以从界面把参数传递给后台. 如果前后台我们有大量数据需要交互,JSON方便我们传递和读取. 如果需要更新一个界面的某一部分数据,并不想刷新界面,就要用到Ajax. 1. 表单脚 ...

  5. GCD线程间通信

    从子线程回到主线程 dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{     // 执 ...

  6. ubuntu14 + nginx + php

    ubuntu14 1.安装nginx sudo apt-get install nginx 安装之后的文件结构大致为: * 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/et ...

  7. oracle日期操作

    日期操作:ADD_MONTHS(date,i) 作用 返回在自定日期上添加的月份 i是整数 如果i是小数,则截取整数部分 i是负数 原有日期减去相应部分 例子: SQL> select add_ ...

  8. ppDelegate的相关介绍

    //  AppDelegate的相关介绍//  IOS笔记 //@interface AppDelegate : UIResponder <UIApplicationDelegate>// ...

  9. CentOS中Device eth0 does not seem to be present错误解决办法

    今天克隆的虚拟机,当需要多台虚拟机的时候,试用克隆真是方便,不过遇到了 Device eth0 does not seem to be present 的问题,在网上找到遇到同样问题的解决方法, 很顺 ...

  10. 开发技巧-Java通过HttpProxy实现穿越

    需求描述     在正常的项目开发需求中,连接远程服务器的场景一般有二:     1  自家实现的http服务器,api接口都已经约定好:     2  开发平台服务,通常如新浪.百度云等平台提供的r ...