jquery實現對div的拖拽功能
阿新 • • 發佈：2017-05-26
func function .org absolut 移動 posit center sed fun
<!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>拖動DIV</title> <style type="text/css"> #show1 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 0px; top: 0px; border: 1px solid black; } #show2 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 100px; top: 0px; border: 1px solid black; } #show3 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 200px; top: 0px; border: 1px solid black; } #show4 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 0px; top: 100px; border: 1px solid black; } #show5 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 100px; top: 100px; border: 1px solid black; } #show6 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 200px; top: 100px; border: 1px solid black; } #show7 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 0px; top: 200px; border: 1px solid black; } #show8 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 100px; top: 200px; border: 1px solid black; } #show9 { background: #7cd2f8; width: 100px; height: 100px; text-align: center; position: absolute; z-index: 1; left: 200px; top: 200px; border: 1px solid black; } #right{ width: 306px; height: 306px; position: absolute; top: 0px; left: 400px; border: 1px solid black; } </style> <script type="text/javascript" src="gongju/jquery-1.11.2.min.js"></script> </head> <body> <div class="show" id="show1" bs="1"> 1 </div> <div class="show" id="show2" bs="2"> 2 </div> <div class="show" id="show3" bs="3"> 3 </div> <div class="show" id="show4" bs="4"> 4 </div> <div class="show" id="show5" bs="5"> 5 </div> <div class="show" id="show6" bs="6"> 6 </div> <div class="show" id="show7" bs="7"> 7 </div> <div class="show" id="show8" bs="8"> 8 </div> <div class="show" id="show9" bs="9"> 9 </div> <!-----------------------------------------------> <div id="right"> </div> </body> </html> <script type="text/javascript"> var biao; $(document).ready(function() { $(".show").mousedown(function(e) //e鼠標事件 { biao=$(this).attr("bs"); $(this).css("cursor", "move"); //改變鼠標指針的形狀 var offset = $(this).offset(); //DIV在頁面的位置 var x = e.pageX - offset.left; //獲得鼠標指針離DIV元素左邊界的距離 var y = e.pageY - offset.top; //獲得鼠標指針離DIV元素上邊界的距離 $(document).bind("mousemove", function(ev) //綁定鼠標的移動事件，因為光標在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 { $("#show"+biao+"").stop(); //加上這個之後 var _x = ev.pageX - x; //獲得X軸方向移動的值 var _y = ev.pageY - y; //獲得Y軸方向移動的值 $("#show"+biao+"").animate({ left: _x + "px", top: _y + "px" }, 10); }); }); $(document).mouseup(function() { $("#show"+biao+"").css("cursor", "default"); $(this).unbind("mousemove"); }) }) </script>
jquery實現對div的拖拽功能