js, um Drag & Drop-Sortierdetails zu erreichen

 {
    Rand: 0;
    Polsterung: 0;
    Box-Größe: Rahmenbox;
}

.Netz {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
    Rand: 0 -15px -15px 0;
    Touch-Aktion: keine;
    Benutzerauswahl: keine;
}

.Rasterelement {
    Breite: 90px;
    Höhe: 90px;
    Zeilenhöhe: 88px;
    Textausrichtung: zentriert;
    Rand: 0 15px 15px 0;
    Hintergrund: #FFF;
    Rand: 1px durchgezogen #d6d6d6;
    Listenstil: keiner;
}

.aktiv {
    Hintergrund: #c8ebfb;
}

.clone-grid-item {
    Position: fest;
    links: 0;
    oben: 0;
    Z-Index: 1;
    Breite: 90px;
    Höhe: 90px;
    Zeilenhöhe: 88px;
    Textausrichtung: zentriert;
    Hintergrund: #FFF;
    Rand: 1px durchgezogen #d6d6d6;
    Deckkraft: 0,8;
    Listenstil: keiner;
}

<ul Klasse="Raster">
    <li Klasse="grid-item">Element1</li>
    <li class="grid-item">Element2</li>
    <li class="grid-item">item3</li>
    <li class="grid-item">Element4</li>
    <li class="grid-item">Artikel5</li>
    <li class="grid-item">item6</li>
    <li class="grid-item">Artikel7</li>
    <li class="grid-item">Artikel 8</li>
    <li class="grid-item">Artikel9</li>
    <li class="grid-item">item10</li>
</ul>

Klasse Draggable {
    Konstruktor(Optionen) {
        this.parent = options.element; // Übergeordnetes Element this.cloneElementClassName = options.cloneElementClassName; // Klassenname des Klonelements this.isPointerdown = false;
        this.diff = { x: 0, y: 0 }; // Differenz im Verhältnis zur letzten Bewegung this.drag = { element: null, index: 0, lastIndex: 0 }; // Element ziehen this.drop = { element: null, index: 0, lastIndex: 0 }; // Element freigeben this.clone = { element: null, x: 0, y: 0 };
        dies.lastPointermove = { x: 0, y: 0 };
        this.rectList = []; // Wird verwendet, um die mit der Drag-Item-Methode getBoundingClientRect() erhaltenen Daten zu speichern this.init();
    }
    init() {
        dies.getRect();
        this.bindEventListener();
    }
    // Informationen zur Elementposition abrufen getRect() {
        diese.rectList.length = 0;
        für (const item von diesem.übergeordneten.untergeordneten Element) {
            dies.rectList.push(item.getBoundingClientRect());
        }
    }
    handlePointerdown(e) {
        // Wenn es ein Mausklick ist, reagiere nur auf die linke Taste, wenn (e.pointerType === 'mouse' && e.button !== 0) {
            zurückkehren;
        }
        wenn (e.Ziel === dieses.Elternteil) {
            zurückkehren;
        }
        dies.isPointerdown = true;
        Dies.übergeordnet.setPointerCapture(e.pointerId);
        this.lastPointermove.x = e.clientX;
        this.lastPointermove.y = e.clientY;
        dieses.drag.element = e.ziel;
        this.drag.element.classList.add('aktiv');
        dieses.clone.element = dieses.drag.element.cloneNode(true);
        dieses.clone.element.className = dieses.cloneElementClassName;
        this.clone.element.style.transition = "keine";
        const i = [].indexOf.call(dieses.übergeordnetes.untergeordnetes, dieses.drag.element);
        dies.clone.x = dies.rectList[i].left;
        dies.clone.y = dies.rectList[i].top;
        dies.drag.index = i;
        dies.drag.lastIndex = i;
        this.clone.element.style.transform = "translate3d(" + this.clone.x + "px, " + this.clone.y + "px, 0)";
        Dokument.Body.AppendChild(dieses.Klonelement);
    }
    handleZeigerbewegung(e) {
        wenn (dies.istPointerdown) {
            this.diff.x = e.clientX - this.lastPointermove.x;
            this.diff.y = e.clientY - this.lastPointermove.y;
            this.lastPointermove.x = e.clientX;
            this.lastPointermove.y = e.clientY;
            dies.clone.x += dies.diff.x;
            dies.klon.y += dies.diff.y;
            this.clone.element.style.transform = "translate3d(" + this.clone.x + "px, " + this.clone.y + "px, 0)";
            für (lass i = 0; i < this.rectList.length; i++) {
                // Kollisionserkennung, wenn (e.clientX > this.rectList[i].left && e.clientX < this.rectList[i].right &&
                    e.clientY > diese.rectList[i].oben und e.clientY < diese.rectList[i].unten) {
                    dieses.drop.element = dieses.parent.children[i];
                    dies.drop.lastIndex = i;
                    wenn (dieses.drag.element !== dieses.drop.element) {
                        wenn (dieser.drag.index < i) {
                            dieses.übergeordnetes.insertBefore(dieses.drag.element, dieses.drop.element.nextElementSibling);
                            dies.drop.index = i - 1;
                        } anders {
                            dieses.übergeordnetes.insertBefore(dieses.drag.element, dieses.drop.element);
                            dies.drop.index = i + 1;
                        }
                        dies.drag.index = i;
                        const dragRect = diese.rectList[diese.drag.index];
                        const lastDragRect = this.rectList[this.drag.lastIndex];
                        const dropRect = diese.rectList[diese.drop.index];
                        const lastDropRect = diese.rectList[diese.drop.lastIndex];
                        dies.drag.lastIndex = i;
                        this.drag.element.style.transition = "keine";
                        this.drop.element.style.transition = "keine";
                        this.drag.element.style.transform = 'translate3d(' + (lastDragRect.left - dragRect.left) + 'px, ' + (lastDragRect.top - dragRect.top) + 'px, 0)';
                        this.drop.element.style.transform = 'translate3d(' + (lastDropRect.left - dropRect.left) + 'px, ' + (lastDropRect.top - dropRect.top) + 'px, 0)';
                        this.drag.element.offsetLeft; // Neuzeichnen auslösen this.drag.element.style.transition = 'transform 150ms';
                        this.drop.element.style.transition = 'Transformation 150 ms';
                        this.drag.element.style.transform = "translate3d(0px, 0px, 0px)";
                        this.drop.element.style.transform = "translate3d(0px, 0px, 0px)";
                    }
                    brechen;
                }
            }
        }
    }
    handlePointerup(e) {
        wenn (dies.istPointerdown) {
            this.isPointerdown = falsch;
            this.drag.element.classList.remove('aktiv');
            dieses.klon.element.entfernen();
        }
    }
    handlePointercancel(e) {
        wenn (dies.istPointerdown) {
            this.isPointerdown = falsch;
            this.drag.element.classList.remove('aktiv');
            dieses.klon.element.entfernen();
        }
    }
    bindEventListener() {
        dies.handlePointerdown = dies.handlePointerdown.bind(dies);
        dies.handlePointermove = dies.handlePointermove.bind(dies);
        dies.handlePointerup = dies.handlePointerup.bind(dies);
        dies.handlePointercancel = dies.handlePointercancel.bind(dies);
        dies.getRect = dies.getRect.bind(dies);
        this.parent.addEventListener('Zeiger nach unten', this.handlePointerdown);
        this.parent.addEventListener('Zeigerbewegung', this.handlePointermove);
        this.parent.addEventListener('Zeiger nach oben', this.handlePointerup);
        this.parent.addEventListener('pointercancel', this.handlePointercancel);
        window.addEventListener('scrollen', this.getRect);
        window.addEventListener('Größe ändern', this.getRect);
        window.addEventListener('Orientierungsänderung', this.getRect);
    }
    unbindEventListener() {
        this.parent.removeEventListener('Zeiger nach unten', this.handlePointerdown);
        this.parent.removeEventListener('Zeigerbewegung', this.handlePointerbewegung);
        this.parent.removeEventListener('Zeiger nach oben', this.handlePointerup);
        this.parent.removeEventListener('Zeigerabbruch', this.handlePointerabbruch);
        window.removeEventListener('scrollen', this.getRect);
        window.removeEventListener('Größe ändern', this.getRect);
        window.removeEventListener('Ausrichtungsänderung', this.getRect);
    }
}
// Neues Draggable instanziieren({
    Element: document.querySelector('.grid'),
    cloneElementClassName: "Klon-Rasterelement"
});