拖拽功能主要是用在讓用戶做一些自定義的動作，比如拖動排序舀透，彈出框拖動移動等等栓票，效果還是蠻不錯的。下面講解一下拖拽如何實現(xiàn)愕够。
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
這個就是實現(xiàn)代碼走贪，是不是很好玩呢？有空可以試試喲
