拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等，效果还是蛮不错的。下面讲解一下拖拽如何实现。
html样式
<div id="div"></div>
css样式
#div {
position: absolute;
width: 0px;
height: 0px;
background-color: rgba(0, 0, 0, .2);
border: 1px solid #ccc;
}
js样式
var downX = 0,
downY = 0,
// var e =window.event || e.event;
flag = false;
window.onmousedown = function (e) {
downX = e.clientX;
downY = e.clientY;
flag = true;
}
window.onmousemove = function (e) {
if (flag) {
var moveX = e.clientX;
var moveY = e.clientY;
// div.style.left = Math.min(moveX, downX) + 'px';
// div.style.top = Math.min(moveY, downY) + 'px';
// div.style.width = Math.abs(moveX - downX) + 'px';
// div.style.height = Math.abs(moveY - downY) + 'px';
// 如果向右
if (moveX >= downX) {
div.style.left = downX + 'px';
div.style.width = moveX - downX + 'px';
}
// 如果向下
if (moveY >= downY) {
div.style.top = downY + 'px';
div.style.height = moveY - downY + 'px';
}
// 向上
if (moveY < downY) {
div.style.top = moveY + 'px';
div.style.height = downY - moveY + 'px';
}
// 如果向左
if (moveX < downX) {
div.style.left = moveX + 'px';
div.style.width = downX - moveX + 'px';
}
}
}
window.onmouseup = function () {
flag = false;
div.style.cssText = '';
}
WechatIMG334.png
WechatIMG335.png
这个就是实现代码，是不是很好玩呢？有空可以试试哟
