<!DOCTYPE html>

<html>

<title>简单拖曵原理实例</title>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(function(){

            //样式

            $("#drag").css({"position":"absolute","top":"100px","left":"100px","border":"1px solid #789","width":"150px","height":"90px","background":"#988f82","cursor":"move"})

            /*+++++ 拖曳效果 ++++++

            *原理：标记拖曳状态dragging ,坐标位置iX, iY

            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}

            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}

            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}

            */

            var dragging = false;

            var iX, iY;

            $("#drag").mousedown(function(e) {

                dragging = true;

                iX = e.clientX - this.offsetLeft;

                iY = e.clientY - this.offsetTop;

                this.setCapture && this.setCapture();

                return false;

            });

            document.onmousemove = function(e) {

                if (dragging) {

                var e = e || window.event;

                var oX = e.clientX - iX;

                var oY = e.clientY - iY;

                $("#drag").css({"left":oX + "px", "top":oY + "px"});

                return false;

                }

            };

            $(document).mouseup(function(e) {

                dragging = false;

                $("#drag")[0].releaseCapture();

                e.cancelBubble = true;

            })

        })

    </script>

</head>

<body>

    <div id="drag"></div>

</body>

</html>

简单的jquery拖曵原理js特效实例的更多相关文章

  1. Jquery拖拽原理

    /* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ 查看Demo:拖拽图片 function drag(obj) { obj.on ...

  2. JS鼠标的拖拽原理

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

  3. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

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

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

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

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

  6. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  7. 简单的jquery进度条插件LineProgressbar.js，myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  8. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  9. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

随机推荐

  1. Getting Started with WebRTC [note]

    Getting Started with WebRTC 原文 RTCPeerConnection 1.caller和callee互相发现彼此 2.并且交换capabilities信息 3.初始化ses ...

  2. centos 清理内存缓存

    读写文件时,Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这就是Cache Memory(缓存内存).即使程序运行结束后,Cache Memory也不会自动释放.这就会导致程序频繁读 ...

  3. 要做linux运维工程师的朋友，必须要掌握以下几个工具才行 ...

    要做linux运维工程师的朋友,必须要掌握以下几个工具才行 ...  [复制链接]   发表于 2013-12-13 15:59 | 来自  51CTO网页 [只看他] 楼主           本人 ...

  4. C++混合编程之idlcpp教程Lua篇(6)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(5) 第一篇在这 C++混合编程之idlcpp教程(一) 工程LuaTutorial4中加入了四个文件:LuaTutorial4.cpp, Tut ...

  5. winform 子报表数据源赋值

    this.reportViewer1.LocalReport.DataSources.Add(new Microsoft.Reporting.WinForms.ReportDataSource(&qu ...

  6. .NET开发的大型网站列表、各大公司.NET职位精选，C#王者归来

    简洁.优雅.高效的C#语言,神一样的C#创始人Anders Hejlsberg,async/await编译器级异步语法,N年前就有的lambda表达式,.NET Native媲美C++的原生编译性能, ...

  7. DataTable汇总

    一.排序 1 获取DataTable的默认视图 2 对视图设置排序表达式 3 用排序后的视图导出的新DataTable替换就DataTable (Asc升序可省略,多列排序用"," ...

  8. 用c#开发微信 系列汇总

    网上开发微信开发的教程很多,但c#相对较少.这里列出了我所有c#开发微信的文章,方便自己随时查阅.   一.基础知识 用c#开发微信(1)服务号的服务器配置和企业号的回调模式 - url接入 (源码下 ...

  9. ng-template寄宿方式

    如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉.对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以 ...

  10. [.net 面向对象编程基础] (9) 类和类的实例

    [.net 面向对象编程基础] (9) 类和类的实例 类 ,顾名思义就是分类.类别的意思.我们要面向对象编程,就需要对不同的事物进行分类.类可以说是.net面向对象的核心. 类:就是具有相同的属性和功 ...