demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽改变方块大小</title>
<style>
#box {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 300px;
top: 100px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
/*两个功能都要放置到鼠标移动的时候去完成,鼠标移动的时候需要做两件事,
1.改变鼠标样式
2.改变盒子样式
要区分这两件事要知道鼠标有没有按下,
1.鼠标没有按下,改变鼠标样式
2.鼠标按下,改变盒子样式*/
var box = document.getElementById("box");
var dir = '';//用来标记鼠标样式
var isDown = false;//用来记录鼠标有没有按下,true表示按下
var mes = {
};//用来记录盒子的信息
//这个记录的信息主要用于实现第二个功能
box.onmousedown = function (e