<!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1{

                position: absolute;

                background: blue;

            }

        </style>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    </head>

    <body>

        <div class="div1"></div>

        <script type="text/javascript">

            /*

             *拖拽

             */

                class Drag{

                    constructor(){

                        this.item=$(".div1");

                        this.draX=0;//x轴偏移量

                        this.draY=0;//y轴偏移量

                        this.w=200;//宽

                        this.h=200;//高

                        this.l=0;//设置div的left

                        this.t=0;//设置div的top

                    }

                    init(){//初始化div

                        this.item.css({

                            width:this.w,

                            height:this.h

                        });

                        this.offsetGet();

                    }

                    offsetGet(){//得到偏移量

                        var _this=this;

                        this.item.mousedown(function(ev){

                            var e=ev || event;

                            _this.draX=e.clientX-_this.item[0].offsetLeft;//得到X轴偏移量

                            _this.draY=e.clientY-_this.item[0].offsetTop;//得到Y轴偏移量

                            _this.itemMove();

                        })

                    }

                    itemMove(){//移动div

                        var _this=this;

                        $(document).mousemove(function(ev){

                            var e=ev || event;

                            _this.l=e.clientX-_this.draX;//得到left的距离

                            _this.t=e.clientY-_this.draY;//得到top的距离

                            //判断左边距

                            if(_this.l<0){

                                _this.l=0;

                            }else if(_this.l>$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth){

                                _this.l=$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth

                            }

                            //判断上边距

                            if(_this.t<0){

                                _this.t=0;

                            }else if(_this.t>$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight){

                                _this.t=$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight

                            }

                            _this.item.css({

                                left:_this.l,

                                top:_this.t

                            })

                        })

                        this.overMove();

                    }

                    overMove(){//结束移动

                        $(document).mouseup(function(){

                            $(document).unbind();

                        })

                    }

                }

                $(function(){

                    var newDrag=new Drag();

                    newDrag.init();

                })

        </script>

    </body>

</html>

源代码：https://github.com/G-xiaojianwei/study_demo/blob/master/%E6%8B%96%E6%8B%BD.html

面向对象+jquery实现拖拽功能的更多相关文章

  1. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  2. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  3. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  4. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  5. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  6. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  8. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  9. vuejs2.0使用Sortable.js实现的拖拽功能

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...

随机推荐

  1. SSL加速卡调研的原因及背景

    SSL加速卡调研的原因及背景 SSL加速卡调研的原因及背景 网络信息安全已经成为电子商务和网络信息业发展的一个瓶颈,安全套接层(SSL)协议能较好地解决安全处理问题,而SSL加速器有效地提高了网络安全 ...

  2. 【NOIP2018 Day1】题解

    T3 rp++; 今天题比较简单 而且考了很多嫌疑原题? 大家基本250+ 本蒟蒻...T3十分看脸 再次祝rp++; T1 积木大赛本赛嘛 如果d[i] < d[i - 1] ans += d ...

  3. FlatList

    FlatList 之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过An ...

  4. 【Luogu3602】Koishi Loves Segments（贪心）

    [Luogu3602]Koishi Loves Segments(贪心) 题面 洛谷 题解 离散区间之后把所有的线段挂在左端点上,从左往右扫一遍. 对于当前点的限制如果不满足显然会删掉右端点最靠右的那 ...

  5. [luogu4149][bzoj2599][IOI2011]Race【点分治】

    题目描述 给一棵树,每条边有权.求一条简单路径,权值和等于 K,且边的数量最小. 题解 比较明显需要用到点分治,我们定义\(d\)数组表示当前节点到根节点\(rt\)之间有多少个节点,也可以表示有多少 ...

  6. luogu5021 [NOIp2018]赛道修建 (二分答案+dp(贪心?))

    首先二分一下答案,就变成了找长度>=m的 不相交的路径的个数 考虑到在一个子树中,只有一个点能出这个子树去和别的点搞 所以我这个子树里尽量自我满足是不会有坏处的 而且要在自我满足数最大的条件下, ...

  7. bzoj2555(后缀自动机+LCT)

    题目描述 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 题解 做法很自然,建出后缀自动机,维护每个节点的right ...

  8. os模块总结

    学了忘,忘了学,忘了就来看一下...唯一进步的就是这次学的比上次更快了- - 最常用的几个: os.getcwd()   # os.path.abspath(os.path.dirname(__fil ...

  9. react-native中timer的注意点

    务必在卸载组件前清除定时器! 我们发现很多 React Native 应用发生致命错误(闪退)是与计时器有关.具体来说,是在某个组件被卸载(unmount)之后,计时器却仍然在运行.要解决这个问题,只 ...

  10. Fiddler 只取所需

    Fiddler每次打开的时候都会打开十多个会话,期望只想抓取自己想要的请求.   1)User Filters:启用过滤器 2)在Filers面板中勾选“Use Filters”,并在Hosts区域, ...