JS implementiert die Drag- und Platzhalterfunktionen von Elementen
|
In diesem Blogbeitrag geht es um eine Schwierigkeit, die bei einem Projekt aufgetreten ist, an dem der Blogger erst vor ein paar Tagen gearbeitet hat. Nachdem Sie dies gelernt haben, können Sie Seitenelemente problemlos verschieben. In Kombination mit einigen Bedingungen können Sie eine Seite mit dem Fortschritt der Aufgabenerledigung erstellen!
Schauen wir uns zunächst die Wirkung an:
Funktionalität:Ziehen Sie ein Element von einem Abschnitt an eine bestimmte Position in einem anderen Abschnitt . Der Blogger hat dies nach seinen eigenen Bedürfnissen gemacht. Das angeklickte Element kann nur in das nächste Modul des Moduls verschoben werden, in dem es sich befindet. Wenn es in ein anderes Modul verschoben wird, kehrt es an die ursprüngliche Position zurück. Und wenn die Position des von Ihnen gezogenen Elements eine bestimmte Distanz nicht überschreitet, springt es automatisch an die ursprüngliche Position zurück Fallstudie:Der entscheidende Schritt ist dieser! Wenn Sie die Maus drücken, wird nicht nur das aktuelle Element, sondern auch das aktuelle Modul abgerufen (daher muss zu Beginn für jedes Modul ein Indexattribut festgelegt werden, und der Attributwert ist die Indexnummer jedes Moduls selbst). In diesem Schritt wird bestimmt, ob das zu verschiebende Modul das nächste Modul des aktuellen Moduls ist, wenn die Maus losgelassen wird (dies kann etwas verwirrend sein, lesen Sie es sorgfältig durch). Wenn die Bedingung erfüllt ist, muss begonnen werden, die Position nacheinander mit den Elementen im Modul zu vergleichen, zu denen verschoben werden soll (hier wird die spezifische Position bestimmt, an die das Element verschoben werden soll). Nach der Bestätigung muss an der spezifischen Position ein neues leeres Element erstellt werden, und der Inhalt des verschobenen Elements muss diesem leeren Element hinzugefügt werden. Dies ist der letzte Schritt! Vergessen Sie nicht, das Originalelement zu entfernen. Code-Präsentation:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<script src="./js/jQuery.min.js"></script>
<Stil>
* {
Rand: 0;
links: 0;
Listenstil: keiner;
Box-Größe: Rahmenbox;
}
.container {
Anzeige: Flex;
Inhalt ausrichten: Abstand herum;
Breite: 1000px;
Höhe: 600px;
Rand: 100px automatisch;
Polsterung: 0;
}
.container li {
Breite: 180px;
Höhe: 100%;
Hintergrundfarbe: Pflaume;
Rahmenradius: 10px;
Polsterung: 5px;
}
.Artikel {
Breite: 170px;
Höhe: 100px;
Hintergrundfarbe: lachs;
Rand: 5px 0;
Rahmenradius: 10px;
Cursor: Zeiger;
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Behälter">
<li>
<div Klasse="Artikel">1</div>
<div Klasse="Artikel">2</div>
<div Klasse="Artikel">3</div>
</li>
<li>
<div Klasse="Artikel">4</div>
<div Klasse="Artikel">5</div>
<div Klasse="Artikel">6</div>
</li>
<li>
<div Klasse="Artikel">7</div>
<div Klasse="Artikel">8</div>
<div Klasse="Artikel">9</div>
</li>
<li></li>
<li></li>
</ul>
<Skript>
$(Funktion(){
für (var i = 0; i < 5; i++) {
$(".container li")[i].setAttribute('index', i);
}
$('.item').auf('mousedown',Funktion(e){
var index = Zahl($(this).parent()[0].getAttribute('index'));
//Linken und oberen Rand der aktuell ausgewählten Aufgabe abrufen startLeft = $(this).offset().left;
startTop = $(this).offset().top;
//Position der Maus in der ausgewählten Aufgabe suchen mouseX = e.pageX - startLeft;
mouseY = e.pageY - startTop;
$(diese).auf('Mausbewegung',Funktion(e){
$(dieser).offset({
links: e.pageX - mouseX,
oben: e.pageY - mouseY
})
})
$(diese).auf('mouseup',Funktion(){
//Wird verwendet, um die Position aufzuzeichnen, an die sich das Element bewegt k = -1;
$(this).aus('Mausbewegung');
//Holen Sie sich den nächsten Modulindex des ausgewählten Moduls if (index >= 4) {
Index = 3;
}
var nächster = $('.container li').eq(index + 1);
//Wenn die zurückgelegte Distanz beim Loslassen der Maus genau im Bereich des nächsten Moduls des ausgewählten Moduls liegt, führen Sie if ($(this).offset().left >= next.offset().left&&$(this).offset().left <= next.offset().left + next[0].offsetWidth) { aus.
//Inhalt des ausgewählten Elements abrufen var text = $(this).html();
//Erstellen Sie am endgültigen Speicherort eine leere Aufgabe und fügen Sie dann den erworbenen Inhalt hinzu. var father = document.createElement('div');
Vater.Klassenname = "Artikel";
$(Vater).anhängen(Text);
//Das aktuell angeklickte Element abrufen var ele = $(this);
//Wenn das aktuelle Modul kein Element hat, füge es direkt an der ersten Position hinzu. Wenn ja, vergleiche sein oberes Element mit dem größeren und platziere es dahinter if (next.children().length == 0) {
weiter.anhängen(Vater);
} anders {
$.each(nächstes.Kinder(), Funktion (i,Element) {
wenn (ele.offset().top > $(item).offset().top) {
k = i;
}
})
//Wenn k == -1, bedeutet dies, dass die Aufgabe an die erste Position des Moduls gesetzt werden soll, wenn (k == -1) {
nächste.Kinder().eq(0).vor(Vater);
} anders {
nächste.Kinder().eq(k).nach(Vater);
}
}
//Lösen Sie das Verschiebungsereignis und löschen Sie das Element am ursprünglichen Speicherort.
$(this).off("Mausbewegung");
$(diese).entfernen();
$(dies).leer();
} anders {
//Hier ist die Bewegung fehlgeschlagen und zur ursprünglichen Position zurückgekehrt $(this).offset({
links: startLeft,
nach oben: startTop
})
$(this).off("Mausbewegung");
}
})
})
})
</Skript>
</body>
</html>Erweiterungen:In diesem Fall können in Kombination mit Hintergrunddaten die Anzeige und der Drag-Effekt mehrerer Aufgaben mit unterschiedlichem Fortschritt realisiert werden, wie in der folgenden Abbildung dargestellt:
Schnell aufrollen~
Dies ist das Ende dieses Artikels über die JS-Implementierung von Element-Dragging- und Platzhalterfunktionen. Weitere relevante Inhalte zu JS-Element-Dragging- und Platzhalterfunktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16
>>: HTML-Tutorial: So ändern Sie Bildgröße, Ausrichtung, Abstand und Rahmenattribute
Artikel empfehlen
Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?
Frage: Kann der Ursprungsserver keine Darstellung...
Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben
HTML5 fügt weitere semantische Tags hinzu, wie et...
Das Submit-Ereignis des Formulars reagiert nicht
1. Problembeschreibung <br />Wenn JS verwen...
Der Unterschied zwischen den Größen- und Maxlength-Attributen von Input
Ich habe kürzlich die Attribute „input size“ und „...
Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus
Warum hat CSS einen Kaskadierungsmechanismus? Da ...
Eine kurze Erläuterung des Datums-/Uhrzeitformats beim Exportieren von Tabellendaten von MySQL nach Excel
Kürzlich habe ich MySQL verwendet, um Tabellendat...
Eine kurze Diskussion über die Indexseitenstruktur, den Einfügepuffer und den adaptiven Hash-Index von InnoDB
Physische Struktur eines InnoDB-Index Alle InnoDB...
js zum Implementieren von Details im Datei-Upload-Stil
Inhaltsverzeichnis 1. Übersicht 2. Parameter zum ...
WeChat Mini-Programme werden global über die Uni-App geteilt
Bei der tatsächlichen Verwendung ist es häufig er...
Zwei Lösungen zum automatischen Hinzufügen von 0 zum Datum und zur Uhrzeit im regulären JS-Format
Inhaltsverzeichnis Hintergrund Lösung 1 Ideen: Co...
Schreiben Sie ein React-ähnliches Framework von Grund auf
Kürzlich habe ich im Internet den Artikel „Build ...
Detaillierte Erläuterung der Implementierung gemeinsam genutzter Module in Angular-Projekten
Inhaltsverzeichnis 1. Gemeinsam genutztes CommonM...
js native Karussell-Plugin-Produktion
In diesem Artikel wird der spezifische Code für d...
XHTML-Einführungstutorial: Anwendung von Tabellen-Tags
<br />Tabelle ist ein umständliches Tag in X...
Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen
1. Legen Sie den CORS-Antwortheader fest, um domä...