拖拽小方块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#div1{
width: 300px;
height: 300px;
background-color: gold;
cursor: pointer;
outline: none;
/* 固定定位 */
position: fixed;
left: 40px;
top: 50px;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="js/jquery.min.js"></script>
<script>
// 鼠标开始的定位
var oldx,oldy;
// div的左上角的横纵坐标
var oldLeft,oldTop;
// 鼠标有没有点下去
var isMouseDown = false;
// 获取到div // 绑定鼠标按下要产生的事件
$('#div1').on('mousedown',function(evt){
isMouseDown = true;
oldx = evt.clientX;
oldy = evt.clientY;
oldLeft =parseInt($(evt.target).css('left'));
oldTop = parseInt($(evt.target).css('top'));
});
// 绑定鼠标移动的时候要产生的事件
$('#div1').on('mousemove',function(evt){
if(isMouseDown){
var dx = evt.clientX - oldx;
var dy = evt.clientY - oldy;
$(evt.target).css('left',oldLeft + dx +'px');
$(evt.target).css('top',oldTop + dy +'px');
}
});
// 绑定鼠标松开要产生的事件
$('#div1').on('mouseup',function(evt){
isMouseDown = false;
});
// 鼠标离开后
$('#div1').on('mouseout',function(evt){
isMouseDown =false;
});
</script>
</body>
</html>
