jquery 마우스 드래그 효과 공유

3309 단어 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>


  

좋은 웹페이지 즐겨찾기