Access to rendered element

[sapir]

I'm trying to implement a drag&drop system where the user has a list of divs and they can reorder them by dragging them around. The div under the dragged element should be highlighted.

To identify the highlighted element, I'd like to compare the current drag position with each div's bounding box, retrieved with get_bounding_client_rect. This would be done inside view, to decide whether to apply the highlighting styles, and it would use the bounding box of the element rendered by the previous view call.

Of course, I can't just access the element in my view function. So I tried using did_mount. There I can retrieve the bounding box, but I can't save it in my model. I got around that by having an Rc<RefCell<...>> in the model and then modifying it in did_mount, but this doesn't seem the right way to do things.

In Elm, I had done this using Browser.Dom.getElement. I think I called it from my init function, and I think the Task was executed after view, and then again later due to some subscription event.

I now realize that I can use document.get_element_by_id at view time to get the previously rendered element (if any) by ID. This would probably be cleaner than the RefCell, but it seems like it would be nicer to keep the information inside my Model.

How should I solve this?

[David-OConnor]

I haven't dove in yet, but a few ideas/Qs:

Are you using the Drag and Drop API, or implementing from scratch?

Can you store the current dragged item's position as a tuple in the model? Ie add a window listener for mouse/pointer move event (eg Ev::MouseMove) linked to a Skip update, which updates the position under the cursor. Or perhaps not store cursor position, but have this update check the current coords (ie from the mouse event's screen_x() and _y() methods) against the divs whenever the mouse moves, and a dragging flag in the model is active.

[sapir]

I tried document.get_element_by_id and it works fine.

I'm implementing from scratch.

As for the dragged item's position - In the PointerDown event, I call set_pointer_capture and then the element keeps getting PointerMove events as it's being dragged, so I managed without using the window listeners.