html好玩的js,js中好玩的案例之拖拽

学习js的过程中，相信大家都学过拖拽这个案例吧，那么怎么让拖拽变得更高级，更好玩呢，下面给大家讲一下，下图是最终实现效果。

屏幕快照 2019-10-21 下午4.20.03.png

屏幕快照 2019-10-21 下午4.20.35.png

在上面的大盒子里有三个粉色的小盒子，我们通过拖拽 ，可以把这三个小盒子拖拽到下面的大盒子中，也可以再把在下面大盒子里的小盒子拖到上面大盒子中，是不是很有趣呢？下面给大家讲解一下。

html样式

1

2

3

css样式

* {

padding: 0;

margin: 0;

list-style: none;

}

body {

background-color: #87cccc;

}

.first,

.second {

width: 500px;

height: 250px;

margin: 100px auto;

border: 1px solid #9b8888;

}

.sm-box {

width: 50px;

height: 50px;

background-color: pink;

text-align: center;

color: #fff;

line-height: 50px;

user-select: none;

}

js样式

// 首先我们要考虑两个大盒子的坐标位置

var firstBox = document.querySelector('.first');

var secondBox = document.querySelector('.second');

// 两个大盒子的范围

var firstRect = firstBox.getBoundingClientRect();

var secondRect = secondBox.getBoundingClientRect();

// 所有小盒子

var smBoxs = document.querySelectorAll('.sm-box');

// 鼠标按下的坐标

var downX = 0,

downY = 0;

// 鼠标坐标距离盒子左侧、顶部的距离

var distanceX = 0;

distanceY = 0;

// 虚拟盒子

var virtualBox = null;

// 按下的开关

var flag = false;

// 当前下标

var curIdx= 0;

for (var i = 0; i < smBoxs.length; i++) {

// 第一种方法

(function (idx) {

smBoxs[idx].onmousedown = function (e) {

curIdx = idx;

// 按下的坐标

downX = e.clientX;

downY = e.clientY;

// 鼠标坐标距离盒子左侧、顶部的距离

distanceX = downX - this.offsetLeft;

distanceY = downY - this.offsetTop;

// 开启

flag = true;

// 创建一个虚拟的盒子

virtualBox = this.cloneNode(true);

// 设定位置

// virtualBox.style.position = 'absolute';

// virtualBox.style.top = this.offsetTop;

// virtualBox.style.left = this.offsetLeft;

// virtualBox.style.opacity = .4;

virtualBox.style.cssText = 'position: absolute; top:' + this.offsetTop + 'px; left:' + this.offsetLeft + 'px; opacity: .4; background-color: green;';

document.body.appendChild(virtualBox);

}

})(i);

}

var moveX = 0;

moveY = 0;

window.onmousemove = function (e) {

if (flag) {

// 移动的光标位置

moveX = e.clientX;

moveY = e.clientY;

// 盒子移动的距离

var left = moveX - distanceX;

var top = moveY - distanceY;

virtualBox.style.top = top + 'px';

virtualBox.style.left = left + 'px';

}

}

window.onmouseup = function (e) {

flag = false;

// 是否处于 第一个盒子范围

if (isRange(moveX, moveY, firstRect)) {

smBoxs[curIdx].parentNode !==firstBox && firstBox.appendChild(smBoxs[curIdx]);

}

// 是否处于 第二个盒子范围

if (isRange(moveX, moveY, secondRect)) {

smBoxs[curIdx].parentNode !==secondBox && secondBox.appendChild(smBoxs[curIdx]);

}

//移除虚拟元素

virtualBox && document.body.removeChild(virtualBox);

virtualBox = null;

moveX = 0;

moveY = 0;

downX = 0,

downY = 0;

distanceX = 0;

distanceY = 0;

}

// 判断鼠标是否进入范围

function isRange(x, y, range) {

return (range.left <= x) && (range.right >= x) && (range.top <= y) && (range.bottom >= y) ? true : false;

}

是不是很有趣呢？感兴趣的话可以试一下，js小白，如有错误，望多指教