jquery 实现鼠标点击div盒子移动功能

Posted 2020-08-20 百里

// Start 窗口的拖动  
         var _move=false;                 //移动标记   
         var _x,_y;                            //鼠标离控件左上角的相对位置   
        $(document).ready(function(){
                $(".box h4").click(function(){  
//                    alert("click");//点击（松开后触发）
                }).mousedown(function(e){
                    var _this = $(".box");
                    if(!_move){  
                        _move=true;   
                        _x=e.pageX-parseInt(_this.css("left"));   
                        _y=e.pageY-parseInt(_this.css("top")); 
                    }else{  
                        _move=false; 
                    }                          
                 });   
                 $(document).mousemove(function(e){   
                        var _this = $(".box");
                        if(_move){   
                            var x=e.pageX-_x;                                   
                            var y=e.pageY-_y;   
                            _this.css({top:y,left:x});                 
                         }   
                  }).mouseup(function(){   
                      var _this = $(".box");
                           _move=false;   
                  }); 
        });