How to make objects draggable like notion.so?

Question

• I am trying to have dragging feature just like notion.so so when you hover on an element a dragging icon appears then you drag the entire element by dragging the icon.
• I tried this before with reactjs but it has a lot of limitations which is very long to explina however, I like to do it now without react component using document.event_listener('ondragenter',...).
• I tried thisNote This is asudo codebecause I don't mind using rust or javascript any one will be great.
• the following function make the drag icon appear when hover so you can drag the entire element using the wrapper then remove the wrapper when the mouse hover on other elements

let prev_element = null;
let prev_element_inner_html = null;

fn on_mouse_enter(event){
   if prev_element(){
       let elemnt = document.query_selelctor(`.${prev_element.attributes.class}`)
       // unrape the prev element
       element.inner_html = prev_element_inner_html
   }
   let elemnt = document.query_selelctor(`.${event.target.attributes.class}`)    
   element.inner_html = `<span class="wrapper"><span class="drag_icon></span>${element.inner_html}<span>`  
}

• GoalI want to check if you have better ideas because this solution is too long and requires me to check the entire dom and `set_attribute('mouseenter',"on_mouse_enter") for each single element.

• NoteI can't use packages or yew or reactjs because my project requires too many other functionalities that require pure rust or pure javascript

Answer 1

Did you implement your achievement?
(non-programmer over here)
I want to make a sn-p CSS file that also makes drag-and-drop feature for my Obsidian Vault.
Hopefully, it is doable.