js to achieve simple drag effect
|
This article shares the specific code of js to achieve a simple drag effect for your reference. The specific content is as follows 1. Basic effects of draggingIdeas: When the mouse is pressed on the box, it is ready to move (the event is added to the object) When the mouse moves, the box follows the mouse (the event is added to the page) When the mouse is lifted, the box stops moving (the event is added to the page)
var o = document.querySelector('div');
//Mouse down o.onmousedown = function (e) {
//Mouse position relative to the box var offsetX = e.clientX - o.offsetLeft;
var offsetY = e.clientY - o.offsetTop;
//Mouse movement document.onmousemove = function (e) {
o.style.left = e.clientX - offsetX + "px";
o.style.top = e.clientY - offsetY + "px";
}
//Mouse up document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}2. Drag and drop issuesIf text appears in the box, or the box itself is an image, due to the default behavior of the browser (text and images can be dragged), we can set return false to prevent its default behavior. However, this interception of default behavior is not applicable in lower versions of IE. You can use global capture to solve the IE problem. Global capture Global capture is only applicable to lower versions of IE.
<button>btn1</button>
<button>btn2</button>
<script>
var bts = document.querySelectorAll('button')
bts[0].onclick = function () {
console.log(1);
}
bts[1].onclick = function () {
console.log(2);
}
// bts[0].setCapture() //Add global capture // bts[0].releaseCapture() ; //Release global capture</script>Once a global capture is added for a specified node, other elements on the page will not trigger the same type of event. 3. Full version of drag and drop
var o = document.querySelector('div');
//Mouse down o.onmousedown = function (e) {
if (o.setCapture) { //IE lower version o.setCapture()
}
e = e || window.event
//Mouse position relative to the box var offsetX = e.clientX - o.offsetLeft;
var offsetY = e.clientY - o.offsetTop;
//Mouse movement document.onmousemove = function (e) {
e = e || window.event
o.style.left = e.clientX - offsetX + "px";
o.style.top = e.clientY - offsetY + "px";
}
//Mouse up document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
if (o.releaseCapture) {
o.releaseCapture(); //Release global capture}
}
return false; //Default behavior of standard browsers}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:
|
<<: js to achieve floor scrolling effect
>>: Example code for converting http to https using nginx
Recommend
Introduction to fork in multithreading under Linux
Table of contents Question: Case (1) fork before ...
The process of building a Jenkins project under Linux (taking CentOS 7 as an example)
Take the deployment of https://gitee.com/tengge1/...
MySQL InnoDB row_id boundary overflow verification method steps
background I talked to my classmates about a boun...
5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)
Congratulations on finally convincing your bosses...
MySQL merge and split by specified characters example tutorial
Preface Merging or splitting by specified charact...
Detailed explanation of how to exit Docker container without closing it
After entering the Docker container, if you exit ...
Detailed process record of Vue2 initiating requests using Axios
Table of contents Preface Axios installation and ...
MySQL uses limit to implement paging example method
1. Basic implementation of limit In general, the ...
Summary of the understanding of virtual DOM in Vue
It is essentially a common js object used to desc...
Example of implementing a virtual list in WeChat Mini Program
Table of contents Preface analyze Initial Renderi...
Detailed explanation of MySQL user rights verification and management methods
This article uses examples to illustrate how to v...
JavaScript to achieve Taobao product image switching effect
JavaScript clothing album switching effect (simil...
Talk about implicit conversion in MySQL
In the course of work, you will encounter many ca...
Vue implements sample code to disable browser from remembering password function
Find information Some methods found on the Intern...
How to manage docker through UI
Docker is being used in more and more scenarios. ...