Hi,
Here are related discussions on this type of component:
Hi everyone,
Is it possible to implement drag and drop cards? Something like this: https://codepen.io/mgmarlow/pen/YwJGRe
or has someone built a new react based component to do this?
I appreciate any help in this regard.
These tweaks works for me.
This works with dynamic children in the drag-container and does trigger an update of children upon reordering:
App.py:
"""
App for testing drag and drop
"""
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, ClientsideFunction, State
SERVER_PORT = 12327
app = dash.Dash(
__name__,
#external_scripts=["https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"],
)
app.layout = html.Div(
id="main",
…
my goal:
I want to arrange the buttons any way I want (drag and drop via JavaScript) and when I press the ‘Show new order’ button I want to pick up the displayed order (show in ‘label2’ in this example).
Current situation:
I have three buttons in a html.div. Via a clientside_callback I can rearrange the buttons. I want to pick up this new arrangement in the next step. At this stage I can only change the html.label with id=‘label1’ in the browser, not the ‘children’ itself.
Approach:
Return …
As I mentioned in the last post above, this clientside callback function is called for its side-effects and I don’t see how it can be used to update props on Dash components.