I am learning to do drag and drop in Liveview. Using HTML Drag & Drop API, I am able to drag & drop elements but is there a way to raise an event back to Liveview to trigger more actions from the event handler?
`
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>`
Thank you helping. Please forgive me for asking a very newbie question. Is this how it is done?
let Hooks = {}
Hooks.ElementDrop = {
mounted() {
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
}
}
let liveSocket = new LiveSocket("/live", Socket, {
params: {
_csrf_token: csrfToken,
hooks: Hooks,
}
})
and in Liveview, I do this.
<div phx-hook="ElementDrop">
But this resulted in
unknown hook for “ElementDrop”
I spent the whole day trying to find a step-by-step intro for beginners to no avail. Can you point me in the right direction to get over this hurdle? Thank you!
Here are a couple of articles for integrating drag and drop with Live View. They use the older LEEx template syntax but should otherwise work for you to learn from.