這篇文章主要介紹了JavaScript實現的簡單拖拽效果,涉及javascript針對鼠標事件與頁面樣式的操作技巧,需要的朋友可以參考下
本文實例講述了JavaScript實現的簡單拖拽效果。分享給大家供大家參考。具體實現方法如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>javascript拖拽</title>
- <style>
- .test{
- text-align:center;
- width:300px;
- height:30px;
- line-height:30px;
- background:#f60;
- position:absolute;
- }
- .test:hover{
- cursor:move;
- }
- </style>
- </head>
- <body>
- <script src="jquery-1.6.2.min.js"></script>
- <div class="test">jb51拖拽測試</div>
- <br/><br/>
- <h1>如果無效請刷新下頁面..</h1>
- <script>
- ;$(function(){
- var isMove=false;
- $(".test").mousedown(function(){isMove=true;}).mouseup(function(){isMove=false;});
- $(document).mousemove(function(e){
- if(!isMove){return;};
- var X=e.clientX-parseInt($(".test").width()/2);
- var Y=e.clientY-parseInt($(".test").height()/2);
- $(".test").css({"left":X,"top":Y,"cursor":"move"});
- });
- });
- </script>
- </body>
- </html>
希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
