jquery鼠标拖拽效果分享 

//html代码部分
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
　　<script src="../js/jquery-1.11.1.js"></script>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .w{
    width: 600px;
        height: 600px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    .a{
        width: 600px;
        height: 50px;
        cursor: move;
        background-color: yellowgreen;
        position: absolute;
        left: 0;
        top:0;
    }
</style>
<body>
<div class="w">
    <div class="a"></div>
</div>
</body>
</html>

　　//需要拖动的部分需加上定位属性 

//jquery代码部分
 <script>
            //鼠标拖拽效果
            (function($){
                $.fn.wwp_tz = function(opt){
                    var defaults = {
                    };
                    var options = $.extend({},defaults,opt);
                    this.each(function(){
                        var $this = $(this);
                        var L=0,T=0;
                        $this.mousedown(function(event){
                            $this.data("down","1");
                            var X = event.clientX;     //获取当前鼠标的X轴;
                            var Y = event.clientY;     //获取当前鼠标的Y轴;
                            var offset = $this.offset();
                            var box_x = offset.left;  //获取当前元素的x轴浮动距离;
                            var box_y = offset.top;   //获取当前元素的y轴浮动距离;
                                L = X-box_x;          //当前鼠标到元素之间的距离;
                                T = Y-box_y;
                        }).mousemove(function(event){
                            if($this.data("down") == 1){
                                var X = event.clientX;     //获取当前鼠标的X轴;
                                var Y = event.clientY;     //获取当前鼠标的Y轴;
                                var box_left = X-L;       //鼠标当前位置减去鼠标到元素的位置
                                var box_top = Y-T;
                                if(options.dom == 1){
                                    $this.css({left:box_left+"px",top:box_top+"px"})
                                }else if(options.dom == 2){
                                    $this.parent().css({left:box_left+"px",top:box_top+"px"})
                                }
                            }else{
                                return false;
                            }
                        }).mouseup(function(){     //鼠标抬起时
                            $this.data("down","-1");

                        }).mouseleave(function(){   //光标离开元素时
                            $this.data("down","-1");
                        });
                    })
                }
            })(jQuery);
            //调用
           $(function(){
               $(".a").wwp_tz({
                dom:2     //  1是元素自身拖动,2是含父节点一起拖动
               })
           });
   </script>

　　

 

posted on 2015-06-11 14:26  王伟鹏的前端随堂笔记  阅读(403)  评论(0)    收藏  举报

导航