Das Ziehenprinzip: Tatsächlich bleibt der Abstand zwischen der Maus und der oberen linken Ecke unverändert. Schauen wir uns das Bild unten an. Dieser rote Punkt ist die Maus.
Dragwiderstand bedeutet tatsächlich, die Position eines Objekts durch die Position der Maus zu berechnen. Es ist so einfach und so vorsätzlich. Wie finden Sie diese Distanz? ?
Der Unterschied zwischen der Mausposition und der Objektposition ist dieser Abstand, oder? Dann besteht diese diagonale Linie aus horizontalen und vertikalen Linien.
Mal sehen, wie das Programm gemacht wird.
<div id = "div1"> </div>
Tatsächlich war das, was er sich veränderte, die linke Oberseite eines Divs, und dann begann er sich zu bewegen. In diesem Fall muss es eine absolute Positionierung geben, oder?
<style type = "text/css"> #div1 {width: 200px; Höhe: 200px; Hintergrund: Rot; Position: absolut; } </style>Hier sind ein paar Schritte: 1. Drücken Sie die Maus 2. Heben Sie die Maus an. 3. Bewegen Sie die Maus
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; // Browser -kompatibler disx = oevent.clientX - odiv.offsetleft; // Die horizontale Position ist die Mausposition - die Position der Div Disy = oevent.clienty - odiv.offsettop; }; odiv.onmousemove = function (ev) {var oevent = ev || Ereignis; odiv.style.left = oevent.clientX - disx+'px'; // aktuelle Maussposition -disx odiv.style.top = oevent.clienty - Disy+'px'; }; }; </script>Sprechen Sie mit dem Bild:
var odivleft = oevent.clientX - disx; Das Diagramm ist sehr klar
Mausup schauen wir uns nicht an, was der Effekt jetzt ist. .
Sie werden ein sehr interessantes Phänomen finden. Wenn ich die Maus nicht drücke, werde ich mir folgen. Warum ist das? ? ?
Werfen wir einen Blick auf Mousemove: Niemand in JavaScript sieht vor, dass Sie die Maus drücken müssen, bevor Sie beginnen, oder? Unabhängig davon, ob Sie die Maus drücken oder nicht, findet diese Mousemove ständig statt, also kommt das Problem von hier aus. Bevor die Maus gedrückt wird, sollte es keine Antwort geben, wenn sich die Maus darauf bewegt. Sie müssen es drücken, um zu reagieren.
Daher sollte diese Mousemove nicht hinzugefügt werden, sobald sie gestartet wird, sondern warten sollte, bis die Maus gedrückt wird, und dann Mousemove hinzuzufügen, um den modifizierten Code anzuzeigen.
Übrigens wird Mausup hinzugefügt, und seine Rolle spiegelt sich zu diesem Zeitpunkt wider. Die Funktion ist odiv.onmousemove = null; Entfernen Sie das Move -Ereignis,
Andernfalls folgt Ihnen das Objekt immer noch, wenn Ihre Maus angehoben wird. odiv.onmouseUp = null; Wenn kein Müll übrig ist, ist es nutzlos, die Maus zu heben.
Schauen wir uns den geänderten Code an:
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; // Browser -kompatibler disx = oevent.clientX - odiv.offsetleft; // Die horizontale Position ist die Mausposition - die Position der Div Disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || Ereignis; odiv.style.left = oevent.clientX - disx+'px'; // aktuelle Maussposition -disx odiv.style.top = oevent.clienty - Disy+'px'; }; odiv.onmouseUp = function () {odiv.onmousemove = null; odiv.onmouseUp = null; // kein Müll übrig, es wäre nutzlos, die Maus zu heben}; }; }; </script>Jetzt haben wir einen einfachen Drag & Drop gemacht, natürlich sind noch einige kleine Probleme zu lösen.
Aber egal was passiert, wir haben bereits einen schleppenden Prototyp. Wir werden einige Fehler einzeln in der nächsten Ausgabe lösen.