<!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>
