js object-oriented method to achieve drag effect
|
This article shares the specific code for implementing drag and drop in js object-oriented way for your reference. The specific content is as follows The implementation principle of the drag function: (take it away directly!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: red;
}
#box2 {
position: absolute;
left: 200px;
top: 200px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="box">Text</div>
<div id="box2">Text</div>
</body>
<script>
class Drag {
startMouse = {};
startEl = {};
#el = null;
constructor(el, option) {
this.#el = el;
this.option = option;
this.start();
}
start() {
let move = (e) => {
this.move(e)
}
this.#el.addEventListener('mousedown', (e) => {
this.startMouse = {
x: e.clientX,
y: e.clientY,
}
this.ondragstart && this.ondragstart(e)
this.startEl = this.getOffset();
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', (e) => {
document.removeEventListener('mousemove', move);
this.end(e);
}, {
once: true
})
e.preventDefault();
})
}
move(e) {
let nowMouse = {
x: e.clientX,
y: e.clientY,
}
let disMouse = {
x: nowMouse.x - this.startMouse.x,
y: nowMouse.y - this.startMouse.y
}
this.ondrag && this.ondrag(e)
this.setOffset(disMouse)
}
end(e) {
this.ondragend && this.ondragend(e)
}
getOffset() {
return {
x: parseFloat(getComputedStyle(this.#el)["left"]),
y: parseFloat(getComputedStyle(this.#el)["top"])
}
}
setOffset(dis) {
this.#el.style.left = this.startEl.x + dis.x + 'px'
this.#el.style.top = this.startEl.y + dis.y + 'px'
}
}
let box = document.querySelector("#box");
let box2 = document.querySelector("#box2");
let d = new Drag(box);
let d2 = new Drag(box2);
let clonex = null;
d2.ondragstart = (e) => {
clonex = box2.cloneNode(true);
document.body.appendChild(clonex)
box2.style.opacity = 0.5
}
d2.ondragend = () => {
document.body.removeChild(clonex);
box2.style.opacity = 1
}
</script>
</html>The final effect (the dragged block is the green block)
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Solution to the same IP after cloning Ubuntu 18 virtual machine
>>: How to change the mysql password on the Xampp server (with pictures)
Recommend
SQL Aggregation, Grouping, and Sorting
Table of contents 1. Aggregate Query 1. COUNT fun...
Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux
1.0 Redis persistence Redis is an in-memory datab...
How to add interface listening mask in Vue project
1. Business Background Using a mask layer to shie...
How to optimize MySQL performance through MySQL slow query
As the number of visits increases, the pressure o...
Vue ElementUI Form form validation
Form validation is one of the most commonly used ...
Element uses scripts to automatically build new components
Table of contents background How does element-ui&...
Use of MySQL trigger
Table of contents 1. Trigger Introduction 1. What...
Tutorial on installing and configuring MySql5.7 in Alibaba Cloud ECS centos6.8
The default MySQL version under the Alibaba Cloud...
How to quickly import data into MySQL
Preface: In daily study and work, we often encoun...
Importance of background color declaration when writing styles
As the title says, otherwise when the page is revi...
Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Table of contents 2. Detailed explanation 2.1. Ad...
A brief discussion on how to customize the host file in Docker
Table of contents 1. Command 2. docker-compose.ym...
In-depth understanding of the life cycle comparison between Vue2 and Vue3
Table of contents Cycle comparison usage Summariz...
About the difference between js typeof and instanceof in judging data types and their development and use
Table of contents 1. typeof operator 2. instanceo...
MySQL foreign key constraint (FOREIGN KEY) case explanation
MySQL foreign key constraint (FOREIGN KEY) is a s...