Dear All
nb a minimal working – or rather not working – example of my issue is here:
The two relevant files are:
I am starting to implement a board game in elixir. Two pieces take turns to move around a square grid. I am using the HTML Drag and Drop API for moving the pieecs, and a phx-hook to identify the valid drop sites (i.e., on a given turn, which squares can a piece move to).
A moveable piece is a draggable div like this:
<div class="piece" id={@piece_id} draggable="true" ondragstart="dragStart(event)"></div>
Game-board squares are table cells like this:
<td id="cell-3-1" phx-hook="Drop">
(Using table for simplicity but will move to divs soon.)
The cells that have phx-hook="Drop" on initial page load are available drop sites and work as expected.
After each piece move, implicated cells have their phx-hook attribute updated (added or removed from the td). I can see the DOM is updated, but the changed cells are never mounted. The cells that have phx-hook="Drop" on initial page load remain the only available drop sites.
What am I missing or doing wrong?
Do I need to do something to force mount of updated elements?
Is there a simple LiveView board game I could consult for hints?
Many thanks
Ivan
AFAIK, this is not possible, see this issue: phx-hook does not run in elements dynamically added to the DOM · Issue #2563 · phoenixframework/phoenix_live_view · GitHub.
I was doing something similar in the past but the idea of force-mounting hooks (to support dynamically added elements) was never implemented because of some security concerns. I’m hoping this will get revisited at some in the future though.
You are mixing “regular” embedded JS calls with hooks here which I can’t imagine is the intended use.
Can you have something more like this where everything is being managed by one hook?
<table id="board" phx-hook="Board">
<tr>
<td data-drop-target-id={target_id}>
<div draggable>...</div>
</td>
</tr>
</table>
This is more or less how I’ve done drag-and-drop in the past complete with dynamically added elements (though I was using a library).
1 Like
Hi, thanks for your comment! I link to that issue from my github README 
especially Chris McCord’s & Jose Valim’s comments from here on, eg:
hooks are mounted any time their element first appears in the DOM
Every time the server sends something, if there are new hooks, they should be mounted.
The DOM nodes that liveview adds are mounted properly.
I am adding these hooks on the server – in a LiveView – I understood your issue to be adding hooks client-side.
Interesting! So the hook is at board level … would it be alerted to updated in child nodes? Would something like this work?
[1]
<table id="board" phx-hook="Board">
<tr>
<td id="cell-3-1" >
<div class="piece" draggable>...</div>
</td>
<td id="cell-3-2" data-drop-target=true>
</td>
</tr>
</table>
The piece is moved from (3,1) to (3,2), and the data-drop-target attribute is updated on both tds.
[2]
<table id="board" phx-hook="Board">
<tr>
<td id="cell-3-1" data-drop-target=true>
</td>
<td id="cell-3-2" >
<div class="piece" draggable>...</div>
</td>
</tr>
</table>
Could the Board hook pick that up?
Ya, you essentially delegate to JS here, which maybe you are trying not to do? Again, I’ve only ever used a library, so it’s a pretty simple set up of setting up the library hooks in the Phoenix JS Hooks (ugh, so many hooks!) and pushing updates to the server
For example, here my entire phx hook using SortableJS for a fairly old project (but is the only one top of mind):
Hooks.Sortable = {
mounted() {
Sortable.create(this.el, {
draggable: ".sticky",
animation: 500,
emptyInsertThreshold: 10,
group: "sticky-lanes",
forceFallback: true,
invertSwap: true,
onEnd: (e) => {
const { id, phxTarget } = e.item.dataset
this.pushEventTo(phxTarget, "move", {
sticky_id: id,
from_lane_id: e.from.dataset.id,
to_lane_id: e.to.dataset.id,
new_position: e.newIndex + 1,
})
},
})
},
}
The point being that the JS takes care of watching for new items. In my example, that’s all hidden away in Sortable but that’s the idea.
Otherwise, ya, creating an element with a hook server side should call mount, I think your issue was just mixing hooks with non-hooks (I think?) but it looks like you have more insight now!
1 Like
To add on to this, the TodoTrek showcase repo has a working example of LiveView and Sortable that supports Trello/kanban-style dragging and dropping cards between lists.
2 Likes
Excellent info, thanks. Yes – trying to avoid javascript 
Will try it out and report back soon.
Thanks v much, I’ll give it a look. I have used Sortable with a django app. Will report back with results/failures soon.
