zoukankan      html  css  js  c++  java
  • 面向对象+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

  • 相关阅读:
    rails中输出excel
    Rails IDE 有很多选择,但是具体到ubuntu 64bit 选择的余地就不多了,这里选择Aptana Studio 3 Beta
    linux中查看系统资源占用情况的命令
    GIT GUI使用
    linux下的c 环境配置vim
    oracle11 忘记密码
    Aptana_Studio 介绍和应用
    linux root命令忘记以及挂载U盘
    程序员创业生死一线 最后归宿在哪里?
    如何使用Log4j? .
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/10250587.html
Copyright © 2011-2022 走看看