Hi
I managed to create a dragdrop from/to containers using dragula.js
But how can I get a callback in Python when elements are dragged, dropped etc .
Eg to get the added/removed elements in the containers.
I’m trying it by using dash-extensions EventListener (sounds like what I need … ?)
When inspecting the app in the webbrowser I see a few js eventlisteners.
The events ‘click’, 'mouseup, ‘mousedown’ work as expected.
But the ‘touchend’, "touchstart events do not seem to work…
Also Dragula itself specifies different eventnames eg. ‘drop’, ‘cancel’, ‘remove’, …
Kinda lost here…
Note that ‘click’ events work fine (uncomment)
Python
import dash
from dash import dcc
import dash_bootstrap_components as dbc
from dash_extensions.enrich import DashProxy, html, Input, Output, State, ClientsideFunction, NoOutputTransform
from dash_extensions import EventListener
app = DashProxy(transforms=[NoOutputTransform()])
app.config.external_stylesheets = ["https://epsi95.github.io/dash-draggable-css-scipt/dragula.css", dbc.themes.BOOTSTRAP]
app.config.external_scripts = ["https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js",
"https://epsi95.github.io/dash-draggable-css-scipt/script.js"]
cols = ['aaa','bbb','ccc','ddd','eee','fff']
events = [
#{"event": "click" , "props": ["srcElement.id"]},
{"event": "touchend", "props": ["srcElement.id"]},
]
app.layout = dbc.Container(
[
EventListener(
html.Div([
dbc.Row([
dbc.Col([
html.Div([
html.Div([
html.P(
x,
style={
'text-indent':'28px'
}
)
],
id = x,
style={
'backgroundColor':'rgb(180,180,180)',
'border': '1px solid black',
'height':'28px'
}
)
for x in cols
],
id="drag_container1",
className="container",
style ={
'backgroundColor' : 'rgb(100,100,100)',
'margin': 0,
'padding': 0,
'height' : '300px',
'overflow-y':'auto',
}
)
]),
dbc.Col([
html.Div(
[],
id="drag_container2",
className="container",
style ={
'backgroundColor' : 'rgb(100,100,100)',
'margin': 0,
'padding': 0,
'height' : '300px',
'overflow-y':'auto',
}
)
]),
]),
],
id="drag_container0",
className="container",
style ={
'width':'80%'
}
),
events=events,
logging=True,
id="el"),
],
className="dbc",
fluid=True,
)
app.clientside_callback(
ClientsideFunction(namespace="clientside", function_name="make_draggable_mre"),
Output("drag_container0", "data-drag"),
[Input("drag_container1", "id"),Input("drag_container2", "id")]
)
@app.callback(Input("el", "n_events"),
State("el", "event"))
def get_event(n_events, e):
print('{} {}'.format(n_events, e))
if e is None:
return dash.no_update
return f"{e} \n (number of clicks is {n_events})"
if __name__ == "__main__":
app.run_server(debug=True)
assets/script.js
if (!window.dash_clientside) {
window.dash_clientside = {};
}
window.dash_clientside.clientside = {
make_draggable_mre: function () {
let args = Array.from(arguments);
var containers = [];
setTimeout(function () {
for (i = 0; i < args.length; i++) {
containers[i] = document.getElementById(args[i]);
}
dragula(containers);
}, 1)
return window.dash_clientside.no_update
}
}
Is there any way to catch the js drop-events in python?
