mr.Xiong使用jQuery实现拖拽小方块的效果

                                                               使用jQuery实现拖拽小方块的效果

                   

首先我们先来给拖拽小方块布局，这个布局就非常简单了，只要一个div标签，再给div标签一个ID就好了

接下来就是给div标签设置样式了，给div标签设置width（宽度）：100px; height（高度）：100px； background（背景颜色）：red；

还有给$（“*”）.css（“margin”，“0px”；设置通配符margin（外边距）为零，这样小方块就会紧挨着左上角了，不会有空隙

这样设置了就可以得到上面那张图的样子了。

我们把布局和样式都弄好了之后就是来实现我们需要的效果了

        

我们先声明一些变量，var X，Y，XX，YY

然后再使用$（“#box”）.mousedown（function（e）{ }）

通过我们给div标签添加的ID获取到div标签并且给div标签添加mousedown（鼠标按键被按下）事件

注意：我们在jQuery中鼠标按钮被按下是mousedown前面没有加“on”，在JS中鼠标事件或者其他事件基本都在前面都加上了“on”

除此之外，mouse（鼠标）事件还有很多

例如：click：鼠标点击某个对象

dblclick：鼠标点击某个对象

Mousemove：鼠标被移动

Mouseout：鼠标从某元素上移开

Mouseover：鼠标被移到某元素上

Mouseup：某个鼠标按键被松开

绑定了事件之后我还在函数方法后面传了一个参数e

Var e = e || $（event）;这个是测试浏览器的兼容性，看看支不支持当前使用的浏览器，如果不支持就换个浏览器用用

接着再获取一下装小方块的盒子并声明一个变量接收他var box=$（“#box”）[0]，然后再给我们上面声明的几个变量赋值

X = e.clientX - box.offfsetLeft;  Y = e.clientY - box.offfsetTop;

再给小方块设置背景颜色$（“#box”）.css（“background”，“green”）

这样我们就完成了第一步，当鼠标点击小方块的时候，小方块的颜色会改变，从红色变成了绿色，接着我们再给window添加onmousemove事件，同样需要给声明的变量赋值，XX = e.clientX；YY = e.clientY ；

还需要设置小方块距离左边和上边的距离

$（“#box”）.css（“left”，XX - X +“px”）

$（“#box”）.css（“top”，YY - Y +“px”）

把这些弄完后，我们点击小方块后移动鼠标，不管松没松开鼠标，小方块都会一直跟着鼠标移动

最后还需给装小方块的盒子绑定一个mouseup（鼠标松开）事件

让window.onmousemove = false；再给小方块设置背景颜色为“orange”

这样鼠标松开，小方块就不会跟着鼠标移动了，我们想要的效果就打出来了。