码迷,mamicode.com
首页 > 其他好文 > 详细

27、 jq 拖拽

时间:2018-07-06 22:30:20      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:script   ack   absolute   width   工具   ext   his   cti   文档   

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

27、 jq 拖拽

标签:script   ack   absolute   width   工具   ext   his   cti   文档   

原文地址:https://www.cnblogs.com/zhongchao666/p/9275626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!