Aujourd'hui, nous allons examiner comment empêcher la traînée d'objets d'être traîné d'une certaine div et de glisser la fonction d'adsorption.
La dernière fois, nous avons parlé de notre traînée et de notre chute, nous ne pouvons pas traîner hors de la zone visuelle. Sur cette base, nous ajoutons un parent div pour l'empêcher de traîner hors du parent. Le principe est le même qu'avant, c'est simple.
Code html:
<div id = "div2"> <div id = "div1"> </div> </div>
Code CSS:
<style type = "text / css"> # div1 {width: 100px; hauteur: 100px; Contexte: rouge; Position: absolue; } # div2 {largeur: 400px; hauteur: 300px; Contexte: #cccccc; Position: relative; } </ style>Code javascript:
<script type = "text / javascript"> // glisser et déposer la div vide. La version basse de Firefox a Bug Window.onLoad = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.getElementById ("div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; document.onmousemove = function (ev) {var oevent = ev || événement; // Stockez l'emplacement actuel du div var odivleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; if (odIvleft <0) {odivleft = 0; } else if (odivleft> odiv2.offsetwidth - odiv.offsetwidth) {odivleft = odiv2.offsetwidth - odiv.offsetwidth; } if (odIvTop <0) {odivtop = 0; } else if (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2.offsetheight - odiv.offsetheight; } odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }; retourne false; // bloque l'événement par défaut et résoudre le bug de firefox}; }; </cript>Les rendus sont les suivants:
C'est simple.
La prochaine chose est de savoir comment l'absorber automatiquement.
En fait, cela est souvent utilisé par les gens. Par exemple, lorsqu'il y a une petite fenêtre dans PS le faisant glisser vers le bord de la page, il le joigne automatiquement.
Comment notre glisser-déposer peut-il avoir une telle fonction?
Cela a en fait été mentionné pendant l'exercice auparavant. C’est comme prendre un taxi et vous ne pouvez pas laisser le conducteur là exactement. Il doit être garé près de la destination.
Il en va de même pour le programme. Tout comme il est presque temps d'y arriver, il peut être attribué directement. Supposons que l'objet que j'ai traîné soit à 50px de la gauche, je pense qu'il est à gauche, et s'il est directement attribué à 0, il adsorbe automatiquement.
Le principe est très simple, voyons comment le code est implémenté. Faites juste un peu de modification
<script type = "text / javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.getElementById ("div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || événement; disx = oevent.clientx - odiv.offsetLeft; disy = oevent.clienty - odiv.offsetTop; document.onmousemove = function (ev) {var oevent = ev || événement; var odIvleft = oevent.clientx - disx; var odIvtop = oevent.clienty - disy; // Lorsque la gauche est inférieure à 50, ce sera automatiquement 0. Cela réalisera l'adsorption si (odivleft <50) {odIvleft = 0; } else if (odivleft> odiv2.offsetwidth - odiv.offsetwidth) {odivleft = odiv2.offsetwidth - odiv.offsetwidth; } if (odIvTop <0) {odivtop = 0; } else if (odivtop> odiv2.offsetheight - odiv.offsetheight) {odivtop = odiv2.offsetheight - odiv.offsetheight; } odiv.style.left = odIvleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onMouseUp = function () {document.onMouseMove = null; document.onmouseUp = null; }; retourne false; }; }; </cript>La prochaine fois, nous parlerons des applications avancées, qui seront plus responsables et utiles. Notre fonction de glisser-déposer a été améliorée.
Par exemple, faire glisser des images et sélectionner du texte. Par exemple, il n'y a qu'une seule div sur la page de glisser que nous utilisons actuellement, que nous ne rencontrerons pas en développement normal.
En fait, quand il y a quelque chose sur la page, quels problèmes se produiront avec cette traînée? ? ?
Sera résolu la prochaine fois ~ veuillez l'attendre avec impatience