面向对象+jquery实现拖拽功能

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

相关阅读:
非阻塞式NIO 小案例（模拟聊天室）
网络通信小案例，服务端接收成功要给客户端一个反馈（阻塞式）
阻塞式网络通信小案例：
NIO的非阻塞式网络通信
 字符编码
 使用分散（Scatter）与聚集（Gather）来实现文件的复制
 使用通道之间的数据传输（效果，也是实现文件的复制）
创建直接缓存区完成文件的复制
 C++预处理详解
 C++的学习资源
原文地址：https://www.cnblogs.com/xiaojianwei/p/10250587.html