鼠标拖拽 

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

 

posted @ 2017-07-03 16:38  小毛驴--  阅读(53)  评论(0)    收藏  举报