During front-end development, there are many places where drag and drop effects are used. Of course, http://jqueryui.com/draggable/ is a good choice, but I am a person who breaks the casserole and asks the truth. I took some time to implement similar plug-ins with js, so I won't say much.
first: html and css
The code copy is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
position: absolute;
width: 100px;
height: 100px;
cursor: move;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
Now, first implement the main algorithm:
The code copy is as follows:
<script>
window.onload = function () {
//Get the div that needs to be dragged
var div1 = document.getElementById("div1");
//Add a mouse press event
div1.onmousedown = function (evt) {
var oEvent = evt || event;
//Get the distance from pressing the mouse to div left top
var distanceX = oEvent.clientX - div1.offsetLeft;
var distanceY = oEvent.clientX - div1.offsetTop;
//Add doc sliding time
document.onmousemove = function (evt) {
var oEvent = evt || event;
//Recalculate the left top value of the div
var left = oEvent.clientX - distanceX;
var top = oEvent.clientY - distanceY;
//left When less than or equal to zero, set to zero to prevent div from dragging out of document
if (left <= 0) {
left = 0;
}
// When left exceeds the right boundary of the document, set to the right boundary
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
if (top <= 0) {
top = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
}
//Assign the div again
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//Add a mouse lift event
div1.onmouseup = function () {
//Clear the event
document.onmousemove = null;
div1.onmouseup = null;
}
}
}
</script>
Yeah, use object-oriented implementation
The code copy is as follows:
<style>
* {
margin:0;
padding:0;
}
#div1 {
width: 100px;
height: 100px;
background-color: red;
}
#div2 {
background-color:yellow;
width:100px;
height:100px;
}
</style>
<div id="div1"></div>
<div id="div2"></div>
js Draggle class:
The code copy is as follows:
function Drag(id) {
this.div = document.getElementById(id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absolute";
}
this.disX = 0;
this.disY = 0;
var _this = this;
this.div.onmousedown = function (evt) {
_this.getDistance(evt);
document.onmousemove = function (evt) {
_this.setPosition(evt);
}
_this.div.onmouseup = function () {
_this.clearEvent();
}
}
}
Drag.prototype.getDistance = function (evt) {
var oEvent = evt || event;
this.disX = oEvent.clientX - this.div.offsetLeft;
this.disY = oEvent.clientY - this.div.offsetTop;
}
Drag.prototype.setPosition = function (evt) {
var oEvent = evt || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if (l <= 0) {
l = 0;
}
else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
l = document.documentElement.clientWidth - this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
t = document.documentElement.clientHeight - this.div.offsetHeight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
}
Drag.prototype.clearEvent = function () {
this.div.onmouseup = null;
document.onmousemove = null;
}
at last: final implementation:
The code copy is as follows:
window.onload = function () {
new Drag("div1");
new Drag("div2");
}
The effects are as follows:
The above is all about this article. I hope it will be helpful for everyone to master JavaScript more proficiently.