Heute werden wir uns ansehen, wie das Ziehen von Objekten daran hindert, aus einer bestimmten Divilität herausgezogen zu werden und die Adsorptionsfunktion zu ziehen.
Das letzte Mal haben wir über unser Ziehen und Abfallen gesprochen, wir können nicht aus dem visuellen Bereich ziehen. Auf dieser Basis fügen wir ein übergeordnetes Div hinzu, um zu verhindern, dass es aus dem Elternteil herausgezogen wird. Das Prinzip ist das gleiche wie zuvor, es ist einfach.
HTML -Code:
<div id = "div2"> <div id = "div1"> </div> </div>
CSS -Code:
<style type = "text/css"> #div1 {width: 100px; Höhe: 100px; Hintergrund: Rot; Position: absolut; } #div2 {width: 400px; Höhe: 300px; Hintergrund: #ccccc; Position: Relativ; } </style>JavaScript -Code:
<skript type = "text/javaScript"> // leere Divation ziehen und fallen lassen. Niedrige Version von Firefox hat ein Fehlerfenster.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 || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || Ereignis; // Speichern Sie den aktuellen Standort des 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.offseteight - odiv.offseteight) {odivtop = odiv2.offseteight - odiv.offseteight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseUp = function () {document.onmousemove = null; document.onmouseUp = null; }; false zurückgeben; // Blockieren Sie das Standard -Ereignis und beheben Sie den Firefox -Fehler}; }; </script>Die Renderings sind wie folgt:
Es ist einfach.
Das nächste ist, wie es automatisch absorbiert werden kann.
Tatsächlich wird dies oft von Menschen verwendet. Wenn beispielsweise ein kleines Fenster in PS vorhanden ist, das es an den Rand der Seite zieht, wird es automatisch angeschlossen.
Wie kann unser Drag & Drop eine solche Funktion haben?
Dies wurde tatsächlich während des Trainings zuvor erwähnt. Es ist wie ein Taxi und Sie können den Fahrer dort nicht genau parken lassen. Er muss in der Nähe des Ziels geparkt sein.
Gleiches gilt für das Programm. So wie es fast Zeit ist, dorthin zu gelangen, kann es direkt zugewiesen werden. Angenommen, das von mir geschobene Objekt ist 50px von links entfernt. Ich denke, es ist links, und wenn es direkt 0 zugeordnet ist, wird es automatisch angezeigt.
Das Prinzip ist sehr einfach. Lassen Sie uns sehen, wie der Code implementiert wird. Führen Sie einfach eine kleine Änderung vor
<script type = "text/javaScript"> fenws.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 || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || Ereignis; var odivleft = oevent.clientX - disx; var odivtop = oevent.clienty - Disy; // Wenn es um weniger als 50 liegt, beträgt es automatisch 0. Dies wird die Adsorption erkennen, wenn (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.offseteight - odiv.offseteight) {odivtop = odiv2.offseteight - odiv.offseteight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseUp = function () {document.onmousemove = null; document.onmouseUp = null; }; false zurückgeben; }; }; </script>Das nächste Mal werden wir über erweiterte Anwendungen sprechen, die verantwortungsbewusster und nützlicher sein werden. Unsere Drag & Drop -Funktion wurde verbessert.
Zum Beispiel Bilder ziehen und Text auswählen. Zum Beispiel gibt es auf der Drag -Seite, die wir derzeit verwenden, nur eine DIV, auf die wir in der normalen Entwicklung nicht begegnen werden.
Wenn sich etwas auf der Seite auf der Seite befindet, welche Probleme werden mit diesem Widerstand passieren? ? ?
Wird das nächste Mal gelöst ~ Bitte freuen Sie sich darauf