1 year ago
#367097
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 purejavascript
javascript
reactjs
rust
yew
0 Answers
Your Answer