provide control item that allows selecting and ordering options

Like sortable lists in Ag Grid:

https://github.com/plotly/dash/assets/101562106/e35dcbbc-e6d3-436e-9bac-67edbabb2e4f

Code for video app:
app.py

import dash_ag_grid as dag
from dash import dcc, html, Input, Output, State, Dash, ctx, callback
import pandas as pd
import dash

app = Dash(__name__)

my_options = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

def draggable_options(id, options) :
    df = pd.DataFrame(
        {
            'options':options,
            'del':['X']*len(options)
        })

    columnDefs = [
        {
            "field": "options", 
            "rowDrag": True,
            'cellStyle': {'padding':'0px', 'margin-right':'15px'}
        },
        {
            "field":"del",
            "cellRenderer": "Button",
            'cellStyle': {'padding':'0px', 'margin-right':'5px', 'text-align':'end'}
        }
    ]

    grid = dag.AgGrid(
            id=id,
            columnDefs=columnDefs ,
            rowData=df.to_dict("records"),
            getRowId="params.data.options",
            columnSize="responsiveSizeToFit",
            dashGridOptions={"rowDragManaged": True, "domLayout": "autoHeight","headerHeight":0},
            style={"border":"none"},
        )
    return grid

app.layout = html.Div(
    [  
        draggable_options(id="grid", options=[]),
        dcc.Dropdown(id='dropdown', options=my_options, multi=True, style={'width':'300px'}),
        html.Div(id="data-after-filter"),
    ],
    style={"margin": 20, "width":"fit-content"},
)

@callback(
    Output("grid", "rowTransaction"),
    Output("dropdown", "value"),
    Output("dropdown", "options"),
    Input("grid", "cellRendererData"),
    Input("dropdown", "value"),
    State("dropdown", "options"),
    prevent_initial_call=True
)
def showChange(click, value, current_options):
    if ctx.triggered_id == 'grid' :
        rowTransaction = {"remove": [{'options':click['rowId']}]}
        new_options = current_options + [click['rowId']]
        return rowTransaction, dash.no_update, new_options
    elif ctx.triggered_id == "dropdown" :
        rowTransaction = {"add": [{
            "options": value,
            "del" : "X"
        }]}
        new_options = [option for option in current_options if option not in value]
        return rowTransaction, None, new_options

if __name__ == "__main__":
    app.run_server(debug=True)

assets/dashAgGridComponentFunctions.js

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};

dagcomponentfuncs.Button = function (props) {
    const {setData, data} = props;

    function onClick() {
        setData();
    }
    return React.createElement(
        window.dash_html_components.Button,
        {
            onClick: onClick,
            style: {
                border: 'none',
                background: 'none',
            },
        },
        props.value
    );
};

Start by running the provided app.py example and reviewing assets/dashAgGridComponentFunctions.js to understand the demonstrated selection and drag-ordering behavior. Done means Dash provides a control item that lets users select options, reorder them, and expose the resulting selection and order to the app.