27、 jq 拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: darkgoldenrod;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script type="text/javascript">
            //工具方法
            //$.extend({})
            $.extend({
                aaa : function(){
                    return 'aaa';
                },
                bbb : function(){
                    return 'bbb';
                },
                ccc : function(){
                    return 'ccc';
                },
                //1. 去除字符串中左边的空格（封装成 工具方法）
                trimLeft : function(str){
                    return str.replace(/^\s+/g,'');
                },
                //2. 去除字符串中右边的空格（封装成 工具方法）
                trimRight : function(str){
                    return str.replace(/\s+$/g,'');
                }
            });
//          alert($.aaa());
//          alert($.bbb());
//          alert($.ccc());
            //对象方法
            //$.fn.extend({})
            
            $.fn.extend({
                aaa : function(){
                    return 'aaa';
                },
                bbb : function(){
                    return 'bbb';
                },
                ccc : function(){
                    return 'ccc';
                },
                //1. 去除字符串中左边的空格（封装成 对象方法）
                trimLeft : function(str){
                    return str.replace(/^\s+/g,'');
                },
                //2. 去除字符串中右边的空格（封装成 对象方法）
                trimRight : function(str){
                    return str.replace(/\s+$/g,'');
                },
                //3. 封装拖拽的方法（封装成 对象方法）
                drag : function(){
                    var disX = null;
                    var disY = null;
                    var that = this; //jQ对象
                    this.mousedown(function(evt){
//                      alert(this);  //原生this对象：代表当前所触发事件的对象
                        disX = evt.pageX - $(this).offset().left;
                        disY = evt.pageY - $(this).offset().top;
                        //文档添加移动事件
                        $(document).mousemove(function(evt){
                            that.css({left : evt.pageX - disX,top : evt.pageY - disY});
                        })
                        //鼠标抬起事件
                        $(document).mouseup(function(){
                            $(this).off();
                        })
                    })
                }
            })
//          alert($().aaa());
//          alert($().bbb());
//          alert($().ccc());
            
            //1. 去除字符串中左边的空格（封装成 工具方法和对象方法）
//          alert('(' + $.trimLeft('      a    b    ') + ')');
//          alert('(' + $().trimLeft('      a    b    ') + ')');
//          alert('(' + $.trimRight('      a    b    ') + ')');
//          alert('(' + $().trimRight('      a    b    ') + ')');
            //2. 去除字符串中右边的空格（封装成 工具方法和对象方法）
            //3. 封装拖拽的方法（封装成 对象方法）
            //事件中的this ： 表示原生对象（当前对象）
            //jQuery对象调用的方法中，this ： 表示jQuery对象
            $('#box').drag();
        </script>
    </body>
</html>
猜你喜欢
