鼠标拖拽
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-1.12.1.js"></script> <title>手风琴效果</title> <style> ul , h2 { padding:0; margin:0; } li { list-style:none; } .sfq{width:100px; height:100px; background-color: red; position: absolute; top:10px;z-index: 100;} table{border-collapse: 0; border-spacing: 0; position: relative;} table tr td{ border: 1px solid #ccc; width: 98px; height: 98px; } </style> <script type="text/javascript"> $(function(){ var orgX,orgY,eleX,eleY,hasMove=false; $(".sfq").on("mousedown",function(e){ orgX= e.pageX; //记录鼠标的水平位置 orgY= e.pageY; //记录鼠标的垂直位置 eleX=$(this).offset().left; //记录元素的水平位置 eleY=$(this).offset().top; //记录元素的垂直位置 hasMove=true; //鼠标按下时标明当前元素可以拖拽标识 }); $(document).on("mousemove",function(e){ if(hasMove){ //当元素可以拖拽时执行操作 //新位置计算方法为元素的上次位置加上新的位移量 var left=eleX+Math.round( ( e.pageX - orgX ) / 100 ) * 100; var top= eleY+Math.round( ( e.pageY - orgY) / 100 ) * 100; //更新位置信息 $(".sfq").css({ top:top, left:left }); } }).on("mouseup",function(e){ hasMove=false; //鼠标松开时设置元素不可拖拽 }); }) </script> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> <div class="sfq"></div> </body> </html>