首页 > 代码库 > WEB前端开发学习----11. JQuery 实现简单的拖拽效果

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

2024-08-09 10:15:55   222人阅读

拖拽效果在网页中很常见。实现起来也不难。记录一下今天实现的简单效果。

拖拽演示

快速拖动时，会出现问题，以后修改.

说白了，就是3个点击事件。

1. 按下鼠标左键， 触发点击事件，此时记录下可以得到鼠标相对于拖动控件的位置（当前鼠标位置-控件位置）；

2. 拖动鼠标，触发移动事件，可以计算出鼠标移动的距离（当前鼠标位置-之前算出的相对位置），也就是拖拽控件所移动的距离；

3. 鼠标抬起，结束拖动。

 

在JQ中，event.pageX    event.pageY可以获取鼠标的位置，相对于文档左上角。

如图：

技术分享

 

注意，在jq获取控件的位置时：

x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));

要去掉单位px.

 

但是 在修改控件位置时，不要加单位，也不要加引号，也不用加单位px！

dx=event.pageX-x;
dy=event.pageY-y;
//不要加引号！！！
$("#box").css({
"top":dy,"left":dx
})

 

完整代码：

 

[html] view plaincopy
 
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    5.     <title>弹出层，移动</title>  
    6.     <script src=http://www.mamicode.com/"jq11.js"></script>  
    7.     <script>  
    8.         //x,y为鼠标离控件左上角的相对位置   
    9.         var x=0;  
    10.         var y=0;  
    11.         var flag=false;  
    12.         $(document).ready(function(){  
    13.             $("button").click(function(){  
    14.                 $("#box").show();  
    15.             })  
    16.               
    17.             $("h3").mousedown(function(event){  
    18.                 //判断鼠标左键  
    19.                 if(event.which==1){  
    20.                     flag=true;  
    21.                       
    22.                     x=event.pageX-parseInt($("#box").css("left"));  
    23.                     y=event.pageY-parseInt($("#box").css("top"));  
    24.                 }  
    25.             })  
    26.   
    27.             $("h3").mousemove(function(event){  
    28.                 if(flag){  
    29.                     //dx,dy鼠标移动的距离  
    30.                     var dx=0;  
    31.                     var dy=0;  
    32.   
    33.                     dx=event.pageX-x;  
    34.                     dy=event.pageY-y;  
    35.                     //不要加引号！！！  
    36.                     $("#box").css({  
    37.                         "top":dy,"left":dx  
    38.                     })    
    39.                 }         
    40.                   
    41.             })  
    42.   
    43.             $("h3").mouseup(function(event) {  
    44.                 flag=false;  
    45.             });  
    46.   
    47.             $("span").click(function(){  
    48.                 $("#box").hide();  
    49.                 //关闭之后，应返回原来的位置  
    50.                 $("#box").css({  
    51.                     top:120,left:120  
    52.                 })    
    53.             })  
    54.         })  
    55.   
    56.     </script>  
    57. </head>  
    58. <style type="text/css">  
    59.     *{margin:0px;  
    60.         padding: 0px;}  
    61.     body{  
    62.         font-size: 14px;  
    63.         padding: 100px;  
    64.     }  
    65.     #box{  
    66.         width:500px;  
    67.         height:400px;  
    68.         border:3px ridge #ccc;  
    69.         display: none;  
    70.         box-shadow: 2px 2px 20px #888888;  
    71.         position:absolute;  
    72.         top:120px;  
    73.         left:120px;  
    74.     }  
    75.     #box h3{  
    76.         height:30px;  
    77.         line-height: 30px;  
    78.         background-color: #ABCDEF;  
    79.         padding-left: 10px;  
    80.         padding-right:10px;  
    81.         color: white;  
    82.         cursor: move;  
    83.     }  
    84.     #box span{  
    85.         float: right;  
    86.         font-size: 12px;  
    87.         cursor: pointer;  
    88.         color:red;  
    89.     }  
    90.     #box p{  
    91.         height:350px;  
    92.         padding: 10px;  
    93.         box-shadow: 3px 3px 10px #aaa inset;  
    94.         background: #FAFAFA;  
    95.     }  
    96. </style>  
    97. <body>  
    98.     <button>弹出</button>  
    99.     <div id="box">  
    100.         <h3><span>关闭</span>鼠标左键拖动</h3>  
    101.         <hr/>  
    102.         <p>有点小问题，不能快速的拖动，慢慢拖吧。。。以后有时间修改</p>  
    103.           
    104.     </div>  
    105. </body>  
    106. </html>  

WEB前端开发学习----11. JQuery 实现简单的拖拽效果


联系
我们