如何用jQuery实现一个长尾词拖拽小方块效果？

本文共计877个文字，预计阅读时间需要4分钟。

今天来分享一个非常实用的拖拽功能，主要利用CSS、JS和jQuery实现。操作简单但非常重要，掌握好才是关键！下面来看效果：

鼠标hover时，会出现透明度变化：这里可以看到，在鼠标hover时，会出现透明度变化。

今天来讲一个很常用的拖拽功能，主要是利用一点css，js和jquery，很简单但同时也很重要，掌握好才是最关键的！

下面来看下效果图：

这里可以看到，在鼠标hover的时候会有一个透明度的变化和一个盒子阴影！并且在右下角会实时的显示出小方块移动时横纵坐标的变化！

可以看到有一个盒子阴影

在鼠标单击按住的时候会变红，然后可以拖动小块随意移动

我们在看代码之前可以先了解下jquery中的基本知识（选择器，css控制器什么的）和offset()和clientX,clientY。思路很简单，就是分别监听鼠标的 mousedown,mouseup,mousemove这三个事件，通过判断div移动之前的坐标，div移动之后的坐标（offset获得）和鼠标移动前后的坐标（clientX和clientY获得）判断div在body里的具体坐标位置，然后设置div在body里左边和上边的距离（left,top）。