Get dragged tab items


#1

I’d like to be able to observe tab items as they’re being dragged, but I’d appreciate if someone could help me start off in the right direction.

I’ve looked at atom/tabs and it appears that the TabView isn’t added as a member of a pane’s items, but injects itself directly into the DOM of the pane view. This leads me to the odd issue that once I being observing atom.workspace.observePanes(), the panes are passed to me before TabView manages to be injected into the DOM.

I would appreciate if someone can help me with the following:

  • is it possible for me to ever get a reference to any of the tab views?
  • is it alright if I defer reading the pane view DOM children, or poll the DOM until I get a handle on the tab view in the DOM?
  • if a pane has a tab view always associated with it and the tab view always creates a tab item for pane items, then observing when the pane is destroyed or when a new item is added to the pane should help notify me when I should look at the DOM to begin or stop observing drag events?

Thank you for your time :heart:


#2

You can use something like the following to observe drag events on .tab elements. The nice thing is that you don’t have to observe panes or anything this way :slight_smile:

function ondragstart(event) {
  // get the .tab element that's being dragged
  var tabView = event.target.closest('.tab-bar .tab');
  // check if mousedown triggered on a tab
  if(tabView == null) return;

  // ...

  // during the drag
  function ondrag(event) {
    // ...
  }
  document.addEventListener('drag', ondrag);

  // clean up
  document.addEventListener('dragend', function ondragend(event) {
    document.removeEventListener('dragend', ondragend);
    document.removeEventListener('drag', ondrag);

    // ...
  });
}
document.addEventListener('dragstart', ondragstart);

// ... when not needed anymore
document.removeEventListener('dragstart', ondragstart);

#3

This is a good morale bolster! Onward, to the DOM it is then :muscle:!