Picker Widget mit Sortierfunktion?

Gibt es eine Möglichkeit den Picker hier:
https://docs.contao.org/dev/reference/widgets/picker/
... mit einer Sortierfunktion zu versehen?

D.h. so dass der User die Elemente auswählt, und dann auch gleich mit Drag&Drop-Buttons sortieren kann.
So wie hier markiert:
Anhang 27869

Denke das wäre superpraktisch :D
Danke schon mal für eure Tipps!

Zitat:

---

Zitat von thesweetg

Gibt es eine Möglichkeit den Picker hier:
https://docs.contao.org/dev/reference/widgets/picker/
... mit einer Sortierfunktion zu versehen?

D.h. so dass der User die Elemente auswählt, und dann auch gleich mit Drag&Drop-Buttons sortieren kann.
So wie hier markiert:
Anhang 27869

Denke das wäre superpraktisch :D
Danke schon mal für eure Tipps!

---

eval sortable und multiple? Steht ja in der Doku beschrieben.
Siehe z.B. das Downloads Element?

Danke, das hatte ich völlig übersehen :o:rolleyes:

Funktioniert super, nur die Benutzeroberfläche der Sortierfunktion finde ich nicht ideal.
Hab daher mit CSS ein paar Anpassungen gemacht.
Hier ein Screenshot der zeigt was ich geändert habe (links alt, rechts neu):
Anhang 27870

Hier das CSS dazu, vielleicht kann's ja mal wer brauchen:

Code:

---

.widget.custom .tl_help {
        margin-top: .2rem;
       
}
.widget.custom ul.sortable {
        margin-top: .35rem;
        margin-bottom: .5rem;
       
}
.widget.custom .sort_hint {
        display: none;
       
}
.widget.custom ul.sortable li {
        border: 1px solid var(--form-border);
        padding: .35rem .4rem;
        position: relative;
        display: block;
        margin-bottom: .2rem;
        transition: background-color 0.3s;
        border-radius: .1rem;
       
}
.widget.custom ul.sortable li:hover {
        background-color: var(--form-button);
       
}
.widget.custom ul.sortable li:after {
        content: '';
        position: absolute;
        display: block;
        background-image: url('../../../../../system/themes/flexible/icons/drag.svg');
        width: 1.1rem;
        bottom: -1px;
        top: -1px;
        right: -1px;
        background-repeat: no-repeat;
        background-position: center;
        background-color: white;
        border-left: 1px solid var(--form-border);
}

---

So sieht das DCA dazu aus:

Code:

---

$GLOBALS['TL_DCA']['tl_projects']['fields']['staff'] = array(
    'inputType' => 'picker',
    'eval' => [
        'multiple' => true,
        'isSortable' => true,
                'tl_class'=>'w50 custom'
    ],
    'sql' => [
        'type' => 'blob',
        'length' => MySQLPlatform::LENGTH_LIMIT_BLOB,
        'notnull' => false,
    ],
    'relation' => [
        'type' => 'hasMany',
        'load' => 'lazy',
        'table' => 'tl_staff_employee',
    ],
);

---