foreword
js Drag the element to generate a new element, the new element moves with the mouse, release the book mark, the new element stops at the position when the mouse is released, click the new element again, the new element itself is dragged, and the new position (parent A baby is born, the mother is at home, and the baby is floating around~)
The purpose of doing this is to create a drag-and-drop poster generator or small program H5 decoration in the future. Similar to ps operation, there are open source projects, but it is too complicated, so I want to build a simple version that can meet my needs. It's ok, you don't need too many bells and whistles.
So first use drag and drop to lay the foundation.
knowledge points
1 DOM event object onmousedown onmousemove onmouseup
HTML DOM Event Object | Novice Tutorial
2 DOM Document object
HTML DOM Document Object | Novice Tutorial
Effect
the code
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>index</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#box1 {
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 1);
position: absolute;
}
.box {
width: 100px;
height: 100px;
background: rgba(255, 0, 0, 0.5);
position: absolute;
}
</style>
</head>
<body>
<div id="box1"></div>
<script>
/*
鼠标拖拽分为3个阶段：
1、当鼠标在元素上方按下时，拖拽开始（onmousedown）
2、当鼠标移动时元素跟随鼠标移动，拖拽进行中（onmousemove）
3、当鼠标松开时，拖拽停止，元素固定在最后所在位置（onmouseup）
*/
//获取元素
var oBox = document.getElementById("box1");
//1、鼠标按下
oBox.onmousedown = function (event) {
console.log('onmousedown')
var parent = document.getElementsByTagName('body')
var drag = document.createElement('div')
parent[0].appendChild(drag)
//事件对象
event = event || window.event;
//计算鼠标与盒子左侧和上方的距离
//左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）
//上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）
var lf = event.clientX - oBox.offsetLeft;
var tp = event.clientY - oBox.offsetTop;
//2、鼠标移动，盒子随着鼠标移动而移动
document.onmousemove = function (event) {
event = event || window.event;
//获取鼠标水平&垂直方向的坐标
var mouseLeft = event.clientX;
var mouseTop = event.clientY;
drag.setAttribute('class', 'box')
//设置盒子的left&top值，注意：要为元素加上定位
drag.style.left = mouseLeft - lf + "px";
drag.style.top = mouseTop - tp + "px";
/*
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为
但是这个对IE8一下不起作用
*/
return false;
}
}
//3、松开鼠标，盒子停止
document.onmouseup = function () {
console.log('onmouseup')
//取消鼠标移动事件
document.onmousemove = null;
var list = document.getElementsByClassName('box')
// HTMLCollection 看起来像数组但不是数组，不能使用数组的方法
// list.forEach(element => {
// element.style.background = 'rgba(255, 0, 0, 1)'
// });
for (i = 0; i < list.length; i++) {
list[i].style.background = 'rgba(255, 0, 0, 1)'
console.log(list[i])
// 这个item变量一定要定义的，后面的事件才能找得到本体
let ietm = list[i]
ietm.onmousedown = function (event) {
console.log('onmousedown')
//事件对象
event = event || window.event;
//计算鼠标与盒子左侧和上方的距离
//左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）
//上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）
var lf = event.clientX - ietm.offsetLeft;
var tp = event.clientY - ietm.offsetTop;
//2、鼠标移动，盒子随着鼠标移动而移动
document.onmousemove = function (event) {
event = event || window.event;
//获取鼠标水平&垂直方向的坐标
var mouseLeft = event.clientX;
var mouseTop = event.clientY;
console.log(ietm)
//设置盒子的left&top值，注意：要为元素加上定位
ietm.style.left = mouseLeft - lf + "px";
ietm.style.top = mouseTop - tp + "px";
/*
当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为
但是这个对IE8一下不起作用
*/
return false;
}
}
}
}
</script>
</body>
</html>reference
js drag event_yanjin_xiaoxiao's blog-CSDN blog_js drag event