涉及到了几个位置的属性

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. zipalign内存对齐优化

    zipalign:android中SDK下tools文件夹 用来对资源文件的内存进行对齐优化 手工命令: 优化:zipalign -v 4 source.apk destination.apk 4: ...

  2. 如何获取EntityManager

    1.在容器内部使用,使用@PersistenceContext 来注入.@PersistenceContextprivate EntityManager em;TAG================= ...

  3. Flask微型框架入门笔记

    例程: from flask import Flask app = Flask(__name__) # 新建一个Flask可运行实体(名字参数如果是单独应用可以使用__name__变量,如果是modu ...

  4. datawindow 创建操作报表。

    最近制作做了几个简单的报表,写下主要的代码.以便各位参考. public void FillDW(DataTable dtbResult) { try { DataRow dtFr; ; , j = ...

  5. IOS网络开发(一)

    1 简易的聊天工具 1.1 问题 Socket的英文原义是孔或者插座的意思,通常也称作套接字,用于描述IP地址和端口,是一个通信链的句柄,本案例使用第三方Socket编程框架AsyncSocket框架 ...

  6. CF 628C --- Bear and String Distance --- 简单贪心

    CF 628C 题目大意:给定一个长度为n(n < 10^5)的只含小写字母的字符串,以及一个数d,定义字符的dis--dis(ch1, ch2)为两个字符之差, 两个串的dis为各个位置上字符 ...

  7. mysql source命令超大文件导入方法总结

    本文章来给各位朋友介绍利用mysql source命令超大文件导入方法总结,下面收集了两种解决办法,一种是把数据库分文件导出然后再导入,另一种是修改my.ini配置文件,下面我一一给各位朋友介绍. 导 ...

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

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

  9. Python中获取字典中最值对应的键

    利用min(dict, key=dict.get) >>> d = {1:1, 2:0, 3:2} {1: 1, 2: 0, 3: 2} >>> min(d, ke ...

  10. Hibernate之mappedBy

    Hibernate之mappedBy 摘要: 一.mappedBy单向关系不需要设置该属性,双向关系必须设置,避免双方都建立外键字段 数据库中1对多的关系,关联关系总是被多方维护的即外键建在多方,我们 ...