repi
repi14mo ago

Draggable event listener for group container

I've been tasked with evaluating Windmill to build an application (lets just say 'similar' to Trello). I was wondering how I can listen for 'drag/drop' event on a group container? Or maybe I'm using the wrong type of component ...
18 Replies
rubenf
rubenf14mo ago
The drag-n-drop is purely on the editor side of things, not the viewer We would either have to build such a component or you would build that custom component with react The latter is only possible with EE
repi
repiOP14mo ago
Ah yes - when searching the docs I am redirected to the editor!! This was for a custom UI which uses drag and drop for our users. I thought it may require building out a custom component
rubenf
rubenf14mo ago
So it is possible but you will definitely need a custom component for it. It would not be too complex, but you will really need a custom component for this so would recommend that your team start a free PoC with us so that you see if it's a good fit for your needs. There are no limits to the kind of custom components it supports
rubenf
rubenf14mo ago
GitHub
GitHub - windmill-labs/windmill-custom-component-template
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
rubenf
rubenf14mo ago
GitHub
windmill-custom-component-template/src/component/Component.tsx at m...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
repi
repiOP14mo ago
Great thanks!
rubenf
rubenf14mo ago
do note that the cloud is on EE so you could experiment there
repi
repiOP14mo ago
Thanks
rubenf
rubenf14mo ago
also, there is no restriction to use react, so if you have some other frameworks you'd like to use your components in, or even vanilla JS, we can provide guidance to adapt our template
repi
repiOP14mo ago
Well ... actually I really prefer building web components - I realise it's not the most popular choice but it is my preference!
rubenf
rubenf14mo ago
It will work, what windmill require is just an iife that will mount itself on a specific div and then we inject some callbacks so you can get inputs and set outputs to interact with the rest of the app
repi
repiOP14mo ago
got it sounds great - I appreciate the help! Awesome project - I'm pushing for it at our company!
rubenf
rubenf14mo ago
Thanks 🙏 if you can build your trello component in webcomponent, we're happy to help you into adapting it to windmill and we will open-source a template for webcomponents based on it for everyone to benefit from it One benefit of our approach compared to iframe is that you load only the iife once so no cost to create one or many components + it's not an iframe so it's native to the dom of the app
repi
repiOP14mo ago
OK great - We are still in research stage but if we progress that would be amazing. I could probably just use vanilla JS for this task but having a web component template would be awesome.
rubenf
rubenf14mo ago
vanillajs is even easier, just use javascript to set innerContent of the div
rubenf
rubenf14mo ago
GitHub
windmill-custom-component-template/src/lib.tsx at main · windmill-l...
Contribute to windmill-labs/windmill-custom-component-template development by creating an account on GitHub.
rubenf
rubenf14mo ago
replace ReactDOM.render(...) with: document.getElementById(props.id)!).innerContent = ... I will prepare a template tomorrow we've released custom components quite recently and we lack templates
repi
repiOP14mo ago
great - thanks!