1 year ago

#367097

test-img

Ali Husham

How to make objects draggable like notion.so?

  • 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 this Note This is a sudo code because 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}`)
       // unwrap 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>`  
}

  • Goal I 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.

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

javascript

reactjs

rust

yew

0 Answers

Your Answer

Accepted video resources