涉及到了几个位置的属性

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. 安装生物信息学软件-MetaPhlAn2

    上周20161021-20161028的任务还没有搞完,所以今天来填坑(微笑脸) ××××××××××××××××××××我是萌萌哒分割线××××××××××××××××××××××××××××××× ...

  2. yum命令详解

    yum(全 称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载 ...

  3. 去除Input输入框中边框的方式

    我们在做制作注册页面时,经常会需要消除Input带来的边框,这时候我们需要用到两个属性 一个是input在非激活状态下,不现实边框,代码规则为 border:none:同时当鼠标移到input输入框上 ...

  4. Javascript的delete

    Javascript中的激活对象(Activation object)和变量对象(Variable object):每个执行上下文在其内部都有一个Variable Object.与执行上下文类似,Va ...

  5. 十分钟了解分布式计算:Petuum

    Petuum是一个机器学习专用分布式计算框架,本文介绍其架构,并基于文章 More Effective Distributed ML via a Stale Synchronous Parallel ...

  6. 修改mysql用户名密码 和 PHPmysqlAdmin对应密码修改

    本地的mysql运行时,可能会用到修改用户名密码: mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('输入新密码');不存在修改用户啊 ...

  7. maven web project打包为war包,目录结构的变化

    一个maven web project工程目录: 资源管理器中的目录层级如下: 导出为war包之后的目录层级为: 我们会发现,其实并没有如下的这些目录层级: 所以这两个目录层级只是IDE为我们添加的, ...

  8. Apache Jena - A Bootstrap

    前言 这篇文档属探究立项性质,作为语义网和本体建模工作的延续. 依照NoSQL Distilled上的考察方法,将Apache Jena作为图数据库的泛型考察.   内容 多种出版物上声明主要有四类N ...

  9. QTableWidget实用技巧(转)

    http://blog.csdn.NET/mingxia_sui/article/details/7681863 在使用Qt不多的日子里,已经两次用到了QTableWidget这个控件,也慢慢的习惯和 ...

  10. 获得图片颜色---摘自php手册

    Example #1 imagecolorsforindex() 例子 ;$color_index = imagecolorat($im, $start_x, $start_y); // 使其可读$c ...