（1）实现在规定区域内跟随鼠标移动（鼠标事件实现）
原理图.png
示例代码效果.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>拖拽</title>
</head>
<style>
#app {
position: relative;
left: 300px;
top: 100px;
width: 1000px;
height: 600px;
background-color: blue;
}
#box {
position: relative;
font-size: 16px;
width: 200px;
height: 200px;
background: green;
box-sizing: border-box;
cursor: move;
}
</style>
<body>
<div id="app">
<div id="box"></div>
</div>
<script>
const app = document.querySelector('#app');
const box = document.querySelector('#box');
const appWidth = app.offsetWidth;
const appHeight = app.offsetHeight;
const boxWidth = box.offsetWidth;
const boxHeight = box.offsetHeight;
const appLeft = app.offsetLeft;
const appTop = app.offsetTop;
box.addEventListener('mousedown', function (e) {
const mx = e.pageX - appLeft - box.offsetLeft;
const my = e.pageY - appTop - box.offsetTop;
function moving(e) {
let left = e.pageX - appLeft - mx;
let top = e.pageY - appTop - my;
if(left < 0) left = 0;
if(left > appWidth - boxWidth) left = appWidth - boxWidth;
if(top < 0) top = 0;
if(top > appHeight - boxHeight) top = appHeight - boxHeight;
box.style.left = left + 'px';
box.style.top = top + 'px';
}
document.addEventListener('mousemove', moving)
document.addEventListener('mouseup',function (e) {
document.removeEventListener('mousemove', moving);
})
});
</script>
</body>
</html>
（2）拖放效果（drag事件实现）
- drag，拖动过程中持续触发，在被拖拉的节点上持续触发
- dragstart， 用户开始拖动元素时触发，在被拖拉的节点上触发。
- dragend，在拖放操作结束时触发（释放鼠标键或按下 ESC 键），在被拖拉的节点上触发。
- dragenter，拖拉进入当前节点时，在当前节点上触发一次。
- dragover， 拖拉到当前节点上方时，在当前节点上持续触发。
- dragleave， 拖拉操作离开当前节点范围时，在当前节点上触发。
- drop ，事件在元素或选中的文本，被放置在有效的放置目标上时被触发。
- dragenter和dragover事件的监听函数，用来取出拖拉的数据（即允许放下被拖拉的元素）。由于网页的大部分区域不适合作为放下拖拉元素的目标节点，所以这两个事件的默认设置为当前节点不允许接受被拖拉的元素。如果想要在目标节点上放下的数据，首先必须阻止这两个事件的默认行为。
<div ondragover="return false">
<div ondragover="event.preventDefault()">
上面代码中，如果不取消拖拉事件或者阻止默认行为，就不能在div节点上放下被拖拉的节点。
// 使用拖放来选择文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>拖拽</title>
</head>
<style>
#app {
position: relative;
left: 300px;
top: 100px;
width: 1000px;
height: 600px;
background-color: blue;
}
#dropbox {
display: inline-block;
position: absolute;
left: 600px;
top: 300px;
width: 200px;
height: 200px;
}
#dropboxs {
display: inline-block;
position: absolute;
left: 50px;
top: 300px;
width: 200px;
height: 200px;
}
.bg {
background-color: #fff;
}
#box {
position: relative;
display: inline-block;
font-size: 16px;
width: 200px;
height: 200px;
background: green;
box-sizing: border-box;
cursor: move;
z-index: 10;
}
.highlight {
background-color: aqua;
}
</style>
<body>
<div id="app">
<div id="box" draggable="true"></div>
<div id="dropbox" class="bg"></div>
<div id="dropboxs" class="bg"></div>
</div>
<script>
var box = document.querySelector('#box');
var dropbox = document.querySelector('#dropbox');
var dropboxs = document.querySelector('#dropboxs');
box.addEventListener("dragstart", dragstart, false);
box.addEventListener("drag", drag, false);
box.addEventListener("dragend", dragend, false);
dropboxs.addEventListener("dragenter", dragenter, false);
dropboxs.addEventListener("dragleave", dragleave, false);
dropboxs.addEventListener("dragover", dragover, false);
dropboxs.addEventListener("drop", drop, false);
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragleave", dragleave, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragstart(e) {
console.log('start');
e.dataTransfer.setData('text/plain', e.target.id)
}
function dragend(e) {
if (!dropbox.children.length && !dropboxs.children.length) app.appendChild(box);
console.log('dragend');
}
function drag(e) {
// console.log('drag');
}
// 只会执行一次
function dragenter(e) {
console.log('enter',e.target.id);
const id = e.target.id;
if(id === 'dropboxs') dropboxs.classList.add('highlight');
if(id === 'dropbox') dropbox.classList.add('highlight');
// e.stopPropagation();
e.preventDefault();
}
// 只会执行一次
function dragleave(e) {
console.log('leave',e);
const id = e.target.id;
const name = e.path[1].id;
if(id === 'dropboxs' || name === 'dropboxs') {
dropboxs.classList.remove('highlight');
if (dropboxs.children.length) dropboxs.removeChild(box)
}
if(id === 'dropbox' || name === 'dropbox') {
dropbox.classList.remove('highlight');
if (dropbox.children.length) dropbox.removeChild(box)
}
// e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
console.log('over');
// e.stopPropagation();
e.preventDefault();
}
function drop(e) {
console.log('drop',e.target.id);
const id = e.target.id;
if(id === 'dropboxs') dropboxs.appendChild(box);
if(id === 'dropbox') dropbox.appendChild(box);
// e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
// handleFiles(files);
}
</script>
</body>
</html>
