Skip to content
Snippets Groups Projects

#3461035: Added grab handle to grab component and drag and drop it

Closed #3461035: Added grab handle to grab component and drag and drop it
1 unresolved thread
1 unresolved thread

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Jesse Baker changed title from 3461035: Added grab handle to grab component and drag and drop it to #3461035: Added grab handle to grab component and drag and drop it

    changed title from 3461035: Added grab handle to grab component and drag and drop it to #3461035: Added grab handle to grab component and drag and drop it

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

  • Please register or sign in to reply
  • Thank you for taking the time to work on this, however I'm sorry but the approach isn't right here. The drag handle button needs to be rendered in the React app (inside the Outline.tsx) and not injected into the iframe.

  • Jesse Baker requested changes

    requested changes

  • 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).

  • closed

  • Please register or sign in to reply
    Loading