/*
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拖拽原理的更多相关文章

  1. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  2. javascript拖拽原理与简单实现方法[demo]

    美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许 ...

  3. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  5. JS鼠标的拖拽原理

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...

  6. js拖拽原理和碰撞原理

    拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的 ...

  7. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  8. 简单的jquery拖曵原理js特效实例

    <!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...

  9. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

随机推荐

  1. android如何切换皮肤

    1.先定义attr文件 <?xml version="1.0" encoding="utf-8"?> <resources> <a ...

  2. ^M的前世今生

    ^M 是ascii中的'\r', 回车符,是16进制的0x0D,8进制的015,十进制的13. 回想计算机发展,旧的打字机使用两个字符来开始一个新行.首先是一个字符命令使打印头移回开始位置(回车),然 ...

  3. Oracle的spool命令

    在控制台上使用spool 路径+文件名 命令可以将整个过程写入指定的文件中, 结束使用spool off 命令, 当执行spool off后文件中的内容才能看见; ed命令修改当前缓冲区的上一条命令;

  4. HTML网页中添加音频视频动画...(转)

    在网页中适当嵌入音频和视频能够充分显示网页的多媒体特性,特别是随着宽带网的普及,使得网络广播和网络视频成为现实,网页音频和视频的重要性也日益突显.具体来说,网页音频和视频的嵌入方法主要有三种: 一.b ...

  5. bnuoj 4357 传送阵

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=4357 [题意]:在1000个数中选择3个之和是m的倍数,可能有多种选择方案,请输出标号排序最小的一组 ...

  6. 设计模式之:组合模式(Composite)

    支持原创:http://blog.csdn.net/hguisu/article/details/7530783 设计模式(七)组合模式Composite(结构型) 1. 概述 在数据结构里面,树结构 ...

  7. Extjs-4.2.1(一)——编辑 hello word

    前言:在搭建好环境后,就可以利用Extjs进行开发了. 一.在项目中拷贝相关的Extjs文件,如下图: 注意:不需要整个Ext开发包全部导入,这样很容易造成eclipse卡死,因为eclipse会自动 ...

  8. BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文

    Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...

  9. css的优先级以及!important的使用

    CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤).起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目 ...

  10. cf 357C

    比赛的时候纯暴力超时了  看了别人的代码  set容器类做的   stl里还是有很多好东西的 /**************************************************** ...