<!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. SSIS oracle 64位 数据源链接

    新建数据源 提供程序选择:本机OLE DB ORACLE Provider For OLE DB 服务器名或文件名中选择Oracle Net Manager中配置好的服务名即可 填写账号,密码,测试, ...

  2. Swift不同storyboard之间的交互

    如何实现多个Storyboard之间的切换 正如大家所知道的,Main-board是·程序运行的入口,如果找不到就会抛出异常,打开plist文件可以看到关于Main-board的描述,特别的制定了其b ...

  3. .Net mvc 后台传单引号错误&#39

    今天调试半天程序 结果出现JS 无法eval() 网上找个半天解决办法无果 最后 是因为后台输出单引号’ 到前台为&#39 解决办法 给一个隐藏文本框或者标签赋值 再取出来就能显示单引号了

  4. Xamarin.Forms.Platform.Perspex, Xamarin Forms 的 Perspex(号称下一代WPF) 实现

    Perspex, 跨平台的UI框架,加上Xamarin Forms的跨平台的中间层,这样同一套代码就可跨几乎所有已知平台,这其中包括旧版Windows, Linux及Mac OS. 目前,基本控件可显 ...

  5. 分享一个漂亮的ASP.NET MVC界面框架

    本文分享一个插件化的界面框架,该框架提供了用户.角色.权限管理功能,也提供了插件的管理和插件中心.下图是该界面框架的样式(全部源码和原理介绍下一篇分享,推荐越多,源码放的越早,呵呵). 要使用该界面框 ...

  6. Oracle expdp/impdp导出导入命令及数据库备份

    使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端使用, ...

  7. MySql学习（MariaDb）

    资料 http://www.cnblogs.com/lyhabc/p/3691555.html http://www.cnblogs.com/lyhabc/p/3691555.html MariaDb ...

  8. Java设计模式10：观察者模式

    观察者模式 观察者模式也叫作发布-订阅模式,也就是事件监听机制.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,使他 ...

  9. Java IO5：字符流

    字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为上一篇文章写了,一个Unicod ...

  10. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...