Pendant le développement frontal, il existe de nombreux endroits où les effets de traînée et de goutte sont utilisés. Bien sûr, http://jqueryui.com/draggable/ est un bon choix, mais je suis une personne qui brise la casserole et demande la vérité. J'ai pris le temps d'implémenter des plug-ins similaires avec JS, donc je ne dirai pas grand-chose.
Premièrement: HTML et CSS
La copie de code est la suivante:
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
<style>
* {
marge: 0;
rembourrage: 0;
}
# div1 {
Position: absolue;
Largeur: 100px;
hauteur: 100px;
curseur: déplacer;
Color d'arrière-plan: rouge;
}
</ style>
</ head>
<body>
<div id = "div1">
</div>
</docy>
</html>
Maintenant, implémentez d'abord l'algorithme principal:
La copie de code est la suivante:
<cript>
window.onload = function () {
// Obtenez la div qui doit être traînée
var div1 = document.getElementById ("div1");
// Ajouter un événement de presse de souris
div1.onmousedown = fonction (evt) {
var oevent = evt || événement;
// Obtenez la distance entre appuyant sur la souris pour div le haut gauche
var distancex = oevent.clientx - div1.offsetLeft;
var Distancey = oevent.clientx - div1.offsetTop;
// Ajouter un temps de glissement doc
document.onmousemove = fonction (evt) {
var oevent = evt || événement;
// recalcule la valeur supérieure gauche du div
var gauche = oevent.clientx - distancex;
var top = oevent.clienty - Distancey;
// laissé lorsqu'il est inférieur ou égal à zéro, réglé sur zéro pour empêcher Div de glisser hors du document
if (gauche <= 0) {
gauche = 0;
}
// lorsque la gauche dépasse la limite droite du document, réglé à la limite de droite
else if (Left> = document.DocumentElement.ClientWidth - Div1.offsetWidth) {
Left = Document.DocumentElement.ClientWidth - Div1.OffSetWidth;
}
if (top <= 0) {
en haut = 0;
}
else if (top> = document.documentElement.clientHeight - div1.offsetheight) {
top = document.DocumentElement.ClientHeight - div1.offsetheight;
}
// attribue à nouveau le div
div1.style.top = top + "px";
div1.style.left = gauche + "px";
}
// Ajouter un événement de levage de souris
div1.onMouseUp = function () {
// effacer l'événement
document.onMouseMove = null;
div1.onMouseUp = null;
}
}
}
</cript>
Ouais, utilisez une implémentation orientée objet
La copie de code est la suivante:
<style>
* {
marge: 0;
rembourrage: 0;
}
# div1 {
Largeur: 100px;
hauteur: 100px;
Color d'arrière-plan: rouge;
}
# div2 {
Color d'arrière-plan: jaune;
Largeur: 100px;
hauteur: 100px;
}
</ style>
<div id = "div1"> </div>
<div id = "div2"> </div>
Classe JS Draggle:
La copie de code est la suivante:
fonction glisser (id) {
this.div = document.getElementById (id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absolu";
}
this.disx = 0;
this.disy = 0;
var _this = this;
this.div.onmousedown = fonction (evt) {
_This.getDistance (EVT);
document.onmousemove = fonction (evt) {
_Te.SetPosition (EVT);
}
_This.div.onMouseUp = function () {
_This.ClearEvent ();
}
}
}
Drag.prototype.getDistance = fonction (evt) {
var oevent = evt || événement;
this.disx = oevent.clientx - this.div.offsetLeft;
this.disy = oevent.clienty - this.div.offsetTop;
}
Drag.prototype.setPosition = fonction (evt) {
var oevent = evt || événement;
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;
}
Enfin: mise en œuvre finale:
La copie de code est la suivante:
window.onload = function () {
Nouveau drag ("div1");
Nouveau drag ("div2");
}
Les effets sont les suivants:
Ce qui précède concerne cet article. J'espère qu'il sera utile pour tout le monde de maîtriser JavaScript plus compétent.