Jquery拖拽原理
/*
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
*/
查看Demo:拖拽图片
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
Jquery拖拽原理的更多相关文章
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- javascript拖拽原理与简单实现方法[demo]
美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JQuery拖拽改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...
- JS鼠标的拖拽原理
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...
- js拖拽原理和碰撞原理
拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的 ...
- jQuery拖拽改变元素大小
一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...
- 简单的jquery拖曵原理js特效实例
<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
随机推荐
- Clone中存在的浅克隆问题
A.java package second; public class A { String country;//国家 String province;//地区 String city;//城市 pu ...
- 十六、mysql 分区之 简单sql优化2
.索引的分类 B-Tree 基本支持 HASH 只有memory支持 R-Tree myisam支持 Full-text myisam支持(全文索引) .Memory引擎下只有“=”条件才会使用索引 ...
- 使用tolua++编译pkg,从而创建自定义类让Lua脚本使用
步骤一:首先自定义类(这里Himi自定义类名 “MySprite”) MySprite.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // // ...
- python学习笔记7(使用字符串)
一.字符串格式化,在%左侧放置一个字符串,右侧放置希望格式化的值. >>> format = 'Hello,%s,%s enough for ya?' >>> va ...
- 2733: [HNOI2012]永无乡 - BZOJ
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- 4.0 spring-注册解析的Bean
1.0 registerBeanDefinition 对于配置文件,解析也解析完了,装饰也装饰完了,对于得到的BeanDefinition已经可以满足后续的使用了,唯一剩下的工作就是注册了, 也就是: ...
- leetcode 练习1 two sum
leetcode 练习1 two sum whowhoha@outlook.com 问题描述 Given an array of integers, return indices of the tw ...
- hdu 2509 Be the Winner 博弈论
博弈论水题!!! 代码如下: #include<stdio.h> #include<iostream> using namespace std; int main(){ int ...
- jquery layout学习
1.官网:http://layout.jquery-dev.com/index.cfm 2.博客园:http://www.cnblogs.com/chen-fan/articles/2044556.h ...
- 首次接触Winform前端交互
首次接触到在winform中加入网页,且跟前端脚本交互.找了一下这方面的资料 此博文转载原地址为:http://www.cnblogs.com/Charles2008/archive/2009/08/ ...