涉及到了几个位置的属性

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. 将从数组中取到的字符串赋值给了UIImage导致的错误

    Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFConstantStr ...

  2. iOS 服务器端推送证书p12文件制作

    A.苹果服务器地址: Production和development用的push的服务器不同pdev是:$apnsHost = 'gateway.sandbox.push.apple.com';pro是 ...

  3. UVALive 7302 (最短路)

    Probelm Terrorists 题目大意 给一张n个点,m条边的无向图.共有q个询问,每次询问u到v的最短路. n <= 100000 ,  n-1 <= m <= n + 5 ...

  4. Android 开发之拦截EditText的输入内容,定制输入内容

    1.EditText作为一个比较成熟的View,在Android的应用开发中得到极为广泛的使用.在某些特殊情况下,我们可能需要定制EditText的输入内容, 只允许指定功能的输入,例如输入一个”dd ...

  5. [原创] 聊聊X-Forwared-For和关于他的几种非主流安全问题

    关于这个X-FORWARED-FOR 有很多非主流漏洞都和他有关  之前我和我的基友misty以为关于这个标头的漏洞会有很多会被很多开发者忽视 会出现很多关于他的安全漏洞 可是由于我精力不足 就没继续 ...

  6. open Live Writer配置步骤

    一.关于 Open Live Writer 微软推出的一款能够免费使用的博客写作软件,主要为用户提供博客在线撰写和编辑功能,可以离线编辑,联网时同步到各大博客网站上去. 接下来,介绍如何使用这款工具发 ...

  7. LeetCode 【46. Permutations】

    Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...

  8. Java 报表之JFreeChart(第二讲)

    1.利用 JFreeChart 创建按颜色分类的水果销售报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; imp ...

  9. python set集合操作

    set集合是一个无序且不重复的集合. 创建一个set集合: name = set('sdd') name 返回结果:{'d', 's'} add 功能:增加集合元素 name = {'d', 's'} ...

  10. Event List 2

    The list of events can be found in src/switch_event.c in a char array called EVENT_NAMES and is summ ...