功能实现:在鼠标点击小方块并拖动的时候。小方块跟着鼠标移动。在鼠标点击放开的时候,小方块停在当前位置不动。
注意:1.在鼠标点击下,鼠标拖动才能移动。
2.拖动的原理:把鼠标与页面的距离赋值给方块,二者与页面的距离一致,看起来像鼠标拖着方块走
3.鼠标指针对于浏览器页面的水平/垂直距离:event.clientX,event.clientY
4.点击方块的时候,鼠标可以在方块的任何一个位置,我们也需要获取这个位置的水平、垂直距离。因为在移动的过程中,假装“拖拽”,鼠标在方块内的位置是不变的。此距离=鼠标的距离- 方块与页面的距离,即:event.clientX-div.offsetLeft,在鼠标点下的事件中获取。
5.“拖拽”的过程中,是鼠标移动事件,鼠标的距离在不断地变化,然后鼠标在方块内的距离不变。用鼠标水平/垂直距离-此固定距离,获得的距离就是方块的距离。
代码部分:
var div1 = document.getElementById('div1');
var disX = 0;var disY = 0;
//鼠标按下事件,获取disX和disY
div1.onmousedown = function(e){
var oEvent = e || event;
disX = oEvent.clientX-div1.offsetLeft;
d