#3461035: Added grab handle to grab component and drag and drop it
1 unresolved thread
1 unresolved thread
Merge request reports
Activity
Filter activity
156 159 160 const appendButton = (listItemEl: HTMLElement) => { 161 if (listItemEl.dataset.xbType === 'component') { 162 let buttonIcon = document.createElement('Button'); 163 listItemEl.insertBefore(buttonIcon, listItemEl.firstChild); 164 buttonIcon.setAttribute('class', 'click-icon'); 165 buttonIcon.style.position = 'absolute'; 166 buttonIcon.style.height = '24px'; 167 buttonIcon.style.width = '24px'; 168 buttonIcon.style.background = 'blue'; 169 buttonIcon.style.left = '-35px'; 170 buttonIcon.style.cursor = 'grab'; 171 buttonIcon.style.visibility = 'hidden'; 172 } 173 }; 174 - Comment on lines +160 to +174
I'm afraid this implementation won't work. In order to preserve the layout/design of the website in the preview pane, we can't have any markup/elements at all to be injected inside of it. For example it could mess with something like an nth-child css selector.
All the UI for the XB should be rendered, absolutely positioned, above the iframe, rather than inside it.
In this particular case, the drag handle should be a child element of the <Outline> component
Thanks for your feedback @jessebaker. I followed this approach to use the
handle
feature of the sortablejs as it only works with child element of the sortable list. I'll follow your suggested approach and update it accordingly.Superseded by !139 (closed).
Please register or sign in to reply