元素JS拖动的实现
涉及到了几个位置的属性
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拖动的实现的更多相关文章
- HTML5 元素拖动 - 实现元素左右拖动, 或更改自身排序
1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Int ...
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- three.js 使用DragControls.js 拖动元素
首先,引入js文件: <script type="text/javascript" src="./path/to/DragControls.js"> ...
- JS拖动DIV布局
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- jQuery插件EasyDrag轻松实现JS拖动的效果
jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- 自己封装的一个原生JS拖动方法。
代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...
- js拖动层原形版
脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.D ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
随机推荐
- enmo_day_03
安装 装载点 : /u01 (第一个挂载点 LUN1) /u01 (第二个挂载点LUN2) /disk01 目录 : /u01/app/oracle /u01/app/app 文件 : 控制文件 :c ...
- iOS移动下上传图片失败解决 (上传多图,带其他参数)
项目中有一个主要的功能,就是上传图片,结结果移动真的是很奇怪,WiFi,联通,电信都没有问题的情况下,居然在移动下不行,真的是很头疼.不过好在最后是解决了 项目的网络请求我是采用ASIHttpRequ ...
- 数据交互 ajax 初始化省
1 //初始化省 2 function initProvince() { 3 if( areaLvel == 0 ) { 4 return; 5 } 6 // 清空option 7 $("# ...
- SVD小结
1.矩阵分解 假设一个矩阵Data是m行n列,SVD(奇异值分解)将Data分解为U,E,VT 三个矩阵: Datam*n=Um*kEk*kVTk*n E是一个对角矩阵,对角元素为奇异值,对应Data ...
- HDU5127 神坑题---vector 、 list 、 deque 的用法区别
题意:三个操作 1 a b : 队列中加入(x = a, y = b); -1 a b : 队列中减去(x = a, y = b); 0 p q :从队列的数对中查询哪一对x,y能够让 p * ...
- 2016年12月11日 php面向对象
面向对象 1.类(由众多对象中抽象出来的) 2.对象(一切皆对象,由类实例化出来的). 类: 求圆的面积 面向过程的方式 1.将圆抽象为一个类 2.实例化对象 class Qiu { var $ban ...
- JS 点击复制Copy (share)
分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...
- python学习笔记 ——python写的猜数字游戏 002
from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...
- listview分页加载
package com.baway.test; import java.util.ArrayList; import com.baidu.vo.Mydata;import com.baidu.vo.S ...
- 关于char类型的连续输入
这个忘了好久了 先回想吧 一 单字符 ① char m; scanf("%d",&m); ② char m; m=getchar(); putchar(m); 二 字符数 ...