引入jQuery库
想要用jQuery搞拖拽功能？别忘了在HTML文件中加个jQuery库！看不到吗？直接到官网下最新的，或用CDN链接搞定。装好了就可以开始写代码~
创建可拖拽元素
想让HTML焕发新活力？试试加个div，它可是制作拖拽功能的神器。再把它打扮得美美的，添加点有意思的元素，你的网页瞬间就变得炫酷十足，用着也更加得心应手！
设置元素样式
这是一个可拖拽的元素。
让我们给新玩意儿加些修饰，让页面看起来更有意思。就像给它换张脸！主要就是变变大小调整下颜色，方便大家找，还能随便拽
编写jQuery拖拽函数
想要完成jQuery拖动功能其实很简单，最重要的就是弄明白鼠标落在哪儿、在那儿怎么划拉以及啥时放手！这么一来，元素就能够跟随鼠标移动，呈现出既美又实用的拖拽效果写代码时要把每一步都想得清清楚楚，头脑清醒，还得小心谨慎！
#dragElement {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
设置元素可被拖拽
哥们儿，你可以搞俩公式哈：第一个，就是让物品能拖着走的功能，第二个就是给元素添点儿炫酷样式，让它们动起来。大概说就是把元素定位固定好了后，再找个不会乱跑的地方，然后就随心所欲地玩耍去！
测试拖拽功能
$(function() {
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
$('#dragElement').mousedown(function(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === this) {
isDragging = true;
}
});
$(document).mousemove(function(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, $('#dragElement'));
}
});
$(document).mouseup(function(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
});
function setTranslate(xPos, yPos, el) {
el.css('transform', 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)');
}
});
搞定这页，我们来试试手！先拿出电脑浏览器找到你的那篇HTML文件。然后在页面上找个东西轻晃鼠标左键，看看能不能互动？多动动手，调整下代码让它更炫酷点！
编写具体步骤
a.当你按下鼠标左键时，先搞清楚活动区域和当前位置！
b.鼠标一动，算出要偏移的距离，马上改这小元素的位子!”
#dragElement {
cursor: move;
}
c.当用户释放鼠标左键时，记录下最终确定的位置信息。
记得马上换个地方的坐标用setTranslate给它！
总结
想要用jQuery做个简单的拖拽功能？很容易哒！先找到jQuery文件（不大哈）放在你的电脑里，然后自己动手写几个拖拽相关的函数即可。写完后别急着试，多次尝试就能顺利实现。学成之后，以后遇到网站无法拖动或需要这个功能时，你就可以游刃有余地应对！
问题与展望
这篇讲 jQuery 拖动的玩意儿好看？你玩儿过没？来说说看。你觉得前端互动设计酷不酷？爷爷给你使点儿什么新鲜玩意儿呐？
评论0