Creating draggable widgets in Dash


I have been trying to implement gridstack.js with Dash. After translating the raw HTML to app.layout format I am not seeing the same results as my html template. I cannot work out why the widget elements are not draggable.

Are there any other solutions or can someone please advise me on what I am doing wrong here.

note: all my gridstack js code is imported as gridstackscript.js

Here is the HTML template:

Dash app:

Any help much appreciated,