Dragula über mehrere Container

[jemand anders]

Hallo,

weiß jemand, wie man mit Dragula ( GitHub - bevacqua/dragula: :ok_hand: Drag and drop so simple it hurts ) mit zig Containern untereinander arbeitet?

Bei mir funktioniert nur die Container der ersten Reihe, d. h. da ich kann Elemente - "xxx" - zwischen A, B und C hin- und herschieben. Aber nach Container 1 tut sich nichts mehr.

Meine DIV-Container:

.container [ .containerA [ xxx xxx xxx xxx ] .containerB [ xxx xxx ] .containerC [ xxx xxx xxx ] ]
.container [ .containerA [ xxx xxx ] .containerB [ xxx xxx ] .containerC [ xxx xxx xxx ] ]
…
.container [ .containerA [ xxx xxx xxx xxx xxx ] .containerB [ xxx xxx ] .containerC [ xxx xxx xxx xxx ] ]

var containers = [
    document.querySelector('container .containerA'),
    document.querySelector('container .containerB'),
    document.querySelector('container .containerC'),
  ];

  dragula({
    containers: containers
  });

Freundl. Grüße

 

[Sempervivum]

Ohne das getestet zu haben, fallen mir zwei Sachen auf:

1. Dies: ".container [ .containerA [ xxx xxx xxx xxx ] .containerB [ xxx xxx ] .containerC [ xxx xxx xxx ] ]" lässt mich vermuten, dass es sich bei dem "container" um eine Klasse handelt. In dem Fall fehlt der Punkt im Selektor hier: document.querySelector('container .containerA').
2. querySelector liefert immer nur das erste Element, auch wenn es mehrere Treffer für den Selektor gibt.

Versuche, statt dessen querySelectorAll zu verwenden:

const containers = Array.from(document.querySelectorAll('.container .containerA, .container .containerB, .container .containerC'));

 

[jemand anders]

Punkt: Sorry, ist beim Umschreiben des Originalcodes und Erstellen des Posts hier passiert.
Erstes Element: Es gibt immer nur diese Dreier-Gruppen, also jeweils ein Element A, B und C pro .container. Es werden jetzt alle Sätze über einen Loop in einem Array selektiert.

Inzwischen habe es ich das Problem gelöst.

In den Dragula-Optionen habe ich zudem den accept-Wert so verändert, dass es nun passt:

accepts: function (el, target, source, sibling) {
    //return true; // elements can be dropped in any of the `containers` by default
    return target.parentElement.parentElement.id === source.parentElement.parentElement.id;

Ohne diese Änderung ist das Verschieben containerübergreifend möglich.