So fügen Sie eine Schiebeanimation zu Elementen hinzu, die mit „element.insertBefore(...)“ neu angeordnet wurden ⇐ CSS

[Guest]

Ich muss bei jeder Neuordnung eine Schiebeanimation auf die .draggable-Elemente unten anwenden. Die Änderungen werden sofort nach den Bestelländerungen angezeigt. Ich möchte eine Verzögerung hinzufügen.

Code: Select all

function listItemDragged(e) {
e.target.classList.add("dragging");
let dropTarget =
document.elementFromPoint(e.clientX, e.clientY) === null
? e.target
: document.elementFromPoint(e.clientX, e.clientY);

if (e.target.parentNode === dropTarget.parentNode) {
dropTarget =
dropTarget !== e.target.nextSibling ? dropTarget : dropTarget.nextSibling;
e.target.parentNode.insertBefore(e.target, dropTarget);
}
}

function listItemDropped(e) {
e.target.classList.remove("dragging");
e.preventDefault();
}

function onLoad() {
let listItems = document.querySelectorAll(".draggable");
Array.prototype.map.call(listItems, (option) => {
option.ondrag = listItemDragged;
option.ondragend = listItemDropped;
});
document.querySelector('.sortable-list').addEventListener("dragover", (e) => e.preventDefault());
}

onLoad();

Code: Select all

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}

body {
background-color: #2b3035;
}

.draggable {
display: flex;
margin-top: 10px;
padding: 10px 12px;
border-radius: 5px;
border: 1px solid #5c636a;
margin-right: 5px;
background-color: #212529;
cursor: grab;
color: #ffffff;
touch-action: none
}

.dragging {
cursor: grabbing;
background: transparent;
color: transparent;
border: none;
}

Code: Select all

[*]

[list]

Lorem ipsum dolor sit amet 1

[*]
Lorem ipsum dolor sit amet 2

[*]
Lorem ipsum dolor sit amet 3

[*]
Lorem ipsum dolor sit amet 4

[/list]

Der gewünschte Effekt ähnelt dem folgenden.


Ich habe mehrere Vorschläge von hier aus ausprobiert, die Frage wurde vor 10 Jahren gefragt, daher funktionieren einige Antworten nicht mehr oder funktionieren nicht mehr, haben aber andere Auswirkungen als die eine oben gezeigt. Ich habe von @dalelandry den Vorschlag erhalten, sortable.js zu verwenden. Dies kann zwar mehr oder weniger die gewünschten Effekte erzielen, die Integration mit anderen Frameworks als node.js kann jedoch etwas umständlich sein und passt möglicherweise nicht zu meinem Fall.< /P>