涉及到了几个位置的属性

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. 初学JavaScript七大注意事项

    知识说明: 初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂.效率更高. 一.简化代码 例如:创建对象 之前是这样的: Var car = new object( ...

  2. 解决Only a type can be imported. com.mysql.jdbc.Connection resolves to a package的报错问题

    写jsp加载数据驱动以后老是提示Only a type can be imported. com.mysql.jdbc.Connection resolves to a package的错误,然而改成 ...

  3. good books

  4. Python操作文件文档

    需要帮老师将44G的图书分类一下,人工当然累死了.所以用Python大法处理一下. 思路是读取文件目录下的书名,然后去百度百科查分类,如果还没有就去豆瓣,当当查.哪一个先找到其余的就不用找了.如果没有 ...

  5. Flask微型框架入门笔记

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

  6. A - Humble Numbers

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  7. Java笔记6-数组

    知识大纲一.数组的应用由于数组是用来存储数据的,所以,它的操作总是增.删除.改.查的操作.数组做为一种最基本的数据结构,它在查询上效率是最高的.但是在增加.删除的操作效率是最低的. 因为,数组的长度一 ...

  8. iwork 09 可以用的序列号

    E4RJ-YKHP-9ER4-WK9Y-H4UM-5S2G9MU-9U9J-KN4M-4PAE-DYNA-5S2EGMU-3PKP-NN9G-3JW4-3RAD-5S2

  9. 关于 MAXScript 中文路径返回上级目录(精简版)

    之前写过一个 关于 MAXScript 中文路径返回上级目录 的博文 今天无意中发现了一个更简单的方法 代码如下: fn newfile filepath = ( nf = getfilenamepa ...

  10. php 函数preg_match、preg_match_all ,以及正则表达式规则

    <?php $str = 'php is the best language phhhhp is'; $part = '/ph{1,}p/'; echo preg_match($part, $s ...