Get dragged tab items


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:


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 ='.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);


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