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

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

Canvas 动画制作

在前面的两篇文章Canvas 基本绘制(下)、Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Can...

45580
来自专栏奇梦博客

调整XiunoBBS上传大尺寸图片加水印错位和水印透明度 配置 JavaScript Xiu

13830
来自专栏天天

20171019

8230
来自专栏LIN_ZONE

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮...

12230
来自专栏进击的君君的前端之路

原生JS实现Tab切换效果和模态框效果

30550
来自专栏iOS122-移动混合开发研究院

PBJVision 快速在应用中集成相机/拍摄功能

PBJVision 简介 PBJVision, 是一个iOS相机操作的封装库,可以让你的应用快速简单地继承相机相关功能. 最新示例:点击下载 注意: 示例需要在...

22160
来自专栏十月梦想

canvas文本操作

contetx.fillText('需要写入画板的文字',left,top,maxwidth);指定了写入画板的文字,文字所处画板的位置left,top,最后一...

8420
来自专栏梧雨北辰的开发录

iOS导航栏使用总结

32320
来自专栏前端知识分享

第43天:事件对象event

一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

11010
来自专栏前端知识分享

第53天:鼠标事件、event事件对象

-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果

15120

扫码关注云+社区

领取腾讯云代金券