码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-11-22 20:19:32      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:span   jquer   sed   false   nbsp   tar   实现   style   div   

// 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;   
                  }); 
        });  

 

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

标签:span   jquer   sed   false   nbsp   tar   实现   style   div   

原文地址:http://www.cnblogs.com/300js/p/6090365.html

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