Picker Widget mit Sortierfunktion?

[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:
Bildschirmfoto 2025-05-01 um 12.54.07.png

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

[zoglo]

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:
Bildschirmfoto 2025-05-01 um 12.54.07.png

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

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

[thesweetg]

Danke, das hatte ich völlig übersehen

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):
sortierung-neu.jpg

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

.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:

$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',
    ],
);