文章目录
- 问题：
-
- 问题分析：
- 需要理解（重点）：
- 解决方案:
-
- 代码：
- 思考：
-
-
- 方向：
-
问题：
在html中创建多个元素，要求能用鼠标点下进行平移，松开固定位置。类似于电脑桌面图标的平移。
问题分析：
首先，类比于电脑桌面的图标拖拽平移，鼠标按下时进入事件，记录鼠标相对元素位置，然后鼠标移动，动态改变元素定位，最后鼠标松开，位置不再改变。
用到绑定的事件有：onmousedown,onmousemove,onmouseup。
值得注意的是：分别对哪个元素绑定相应的事件。
- 鼠标按下，应该是在元素中按下，这个onmousedown绑定于元素上。
- 鼠标移动，是在整个界面中移动，故绑定在document上。
- 鼠标放开，也是在整个页面中放开，绑定在document上。
需要理解（重点）：
在事件触发时，每个触发事件“都”会传入一个对象（关于鼠标位置，点击按钮等并且这个对象只有IE8及以下的浏览器不支持），只需要在绑定事件时写入形参，便可调用该对象的属性。值得一提的是，在获得鼠标定位时，便是采用此方法。
解决方案:
获取鼠标定位，动态改变元素定位。
代码：
//js代码：
window.onload = function() {
var box1 = document.getElementById('box1');
//下面写移动函数。
function move(ele) {
ele.onmousedown = function(e) {
e= e||window.e;//解决IE8不传参问题，IE8的不传只是将对象传到window中。
//获取鼠标相对元素位置
var a = e.clientX - ele.offsetLeft;
var b = e.clientY - ele.offsetTop;
document.onmousemove = function(e) {
e = e||window.e;
//最终位置为：鼠标位置 - 鼠标相对元素位置。
ele.style.left = e.clientX - a +'px';
ele.style.top = e.clientY -b + 'px';
}；
document.onmouseup = function() {
//在鼠标松开后，及时停止事件。
document.onmousemove = null;
document.onmouseup = null;
}；
return false；//取消全选重影事件。对IE8时要用 setCapture（） 和 releaseCapture（）。
}；
}
move(box1);//此时id为box1 的元素便可移动
//以下是为class添加事件：
var box = document.getElementsByClassName('box');
for(var i=0;i<box.length;i++) {
move(box[i]);
}
}
<body>
<div id="box1"></div>
<div class="box"></div>
<div class="box"></div>
</body>
* {
padding: 0px;
margin: 0px;
}
div {
width: 100px;
height: 100px;
}
.box,#box1 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*！！！一定要开启定位。*/
}
思考：
在设计完拖拽后，如何实现点击按钮，产生元素，并同样具有可移动事件？
方向：
创建新节点，添加节点，为节点添加属性。为新加节点调用拖拽函数。
感谢大家的阅读，欢迎批评指正！
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)