Durante el desarrollo frontal, hay muchos lugares donde se utilizan efectos de arrastre y caída. Por supuesto, http://jqueryui.com/draggable/ es una buena opción, pero soy una persona que rompe la cacerola y pregunta la verdad. Me tomé un tiempo para implementar complementos similares con JS, por lo que no diré mucho.
Primero: HTML y CSS
La copia del código es la siguiente:
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> </title>
<estilo>
* {
margen: 0;
relleno: 0;
}
#Div1 {
Posición: Absoluto;
Ancho: 100px;
Altura: 100px;
cursor: mover;
Color de fondo: rojo;
}
</style>
</ablo>
<Body>
<div id = "div1">
</div>
</body>
</html>
Ahora, primero implementa el algoritmo principal:
La copia del código es la siguiente:
<script>
window.onload = function () {
// consigue el div que necesita ser arrastrado
var div1 = document.getElementById ("div1");
// Agregar un evento de prensa de mouse
div1.onmousedown = function (evt) {
var oevent = evt || evento;
// Obtener la distancia de presionar el mouse a div a la parte superior izquierda
var DistanceX = oevent.clientx - div1.offsetleft;
var Dististy = oevent.clientx - div1.offsettop;
// Agregar tiempo de deslizamiento de DOC
document.onmouseMove = function (evt) {
var oevent = evt || evento;
// Recalcular el valor superior izquierdo del DIV
var izquierda = oevent.clientx - Distancex;
var top = oevent.clienty - Distancey;
// izquierda cuando es menor o igual a cero, establecido en cero para evitar que DIV se arrastre fuera del documento
if (izquierda <= 0) {
izquierda = 0;
}
// Cuando la izquierda excede el límite derecho del documento, establecido en el límite derecho
else if (izquierda> = document.documentelement.clientwidth - div1.offsetwidth) {
izquierda = document.documentelement.clientwidth - div1.offsetwidth;
}
if (top <= 0) {
superior = 0;
}
else if (top> = document.documentelement.clientHeight - div1.offsetheight) {
top = document.documentelement.clientheight - div1.offsetheight;
}
// Asigna el div de nuevo
div1.style.top = top + "px";
div1.style.left = izquierda + "px";
}
// Agregar un evento de elevación del mouse
div1.onmouseUp = function () {
// Borrar el evento
document.onmouseMove = null;
div1.onmouseUp = null;
}
}
}
</script>
Sí, use la implementación orientada a objetos
La copia del código es la siguiente:
<estilo>
* {
margen: 0;
relleno: 0;
}
#Div1 {
Ancho: 100px;
Altura: 100px;
Color de fondo: rojo;
}
#div2 {
Color de fondo: amarillo;
Ancho: 100px;
Altura: 100px;
}
</style>
<div id = "div1"> </div>
<div id = "div2"> </div>
clase JS Draggle:
La copia del código es la siguiente:
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 || evento;
this.disx = oevent.clientx - this.div.offsetleft;
this.disy = oevent.clienty - this.div.offsettop;
}
Drag.prototype.setPosition = function (evt) {
var oevent = evt || evento;
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;
}
Por fin: Implementación final:
La copia del código es la siguiente:
window.onload = function () {
nuevo arrastre ("Div1");
nuevo arrastre ("Div2");
}
Los efectos son los siguientes:
Lo anterior se trata de este artículo. Espero que sea útil para todos dominar JavaScript de manera más competente.