Not able to get dragstart event in panel


#1

I’m trying to create a package that provides draggable element in a panel (specifically re-ordering headings in https://atom.io/packages/document-outline). I am using the file tree-view package as a base (though I’m using es6 instead of coffeescript). But I just cannot get ‘dragstart’ events to trigger. Based on HTML docs and on tree-view, all I should need is to set the draggable=true and add an event handler, but I just got no dragstart events and no dragging behaviour :confused:

I tried stripping out all of my code and built a mock panel with drag behaviour based on http://jsfiddle.net/G9mJw/20/ - no dependencies just vanilla js/dom - and I still get no dragging behaviour and no drag events logged. But I can see in the debug inspector under ‘event listeners’ that my callbacks are registered, but something is apparently blocking the drag behaviour. Anyone got any ideas what i’m missing?

'use babel';

function onDragStart(event) {
  console.log(event);
  event.dataTransfer.setData('text/html', null); // cannot be empty string
}

function onDragOver(event) {
  var counter = document.getElementById('counter');
  counter.innerText = parseInt(counter.innerText, 10) + 1;
}

export default class DocumentOutlineView {

  constructor(editor, docModel) {
    this.editor = editor;
    // Create root element
    this.element = document.createElement('div');
    this.element.classList.add('document-outline');
    this.panel = atom.workspace.addRightPanel({item: this.element});

    let dragel = document.createElement('div');
    dragel.id = 'draggable';
    dragel.setAttribute('draggable', true);
    this.element.appendChild(dragel);

    let dropel = document.createElement('div');
    dropel.id = 'dropzone';
    dropel.setAttribute('dropzone', true);
    this.element.appendChild(dropel);

    dragel.addEventListener('dragstart', onDragStart, false);
    dropel.addEventListener('dragover', onDragOver, false);
  }

  // Tear down any state and detach
  destroy() {
    this.element.remove();
    this.panel.destroy();
  }

  getElement() {
    return this.element;
  }

  hide() {
    this.panel.hide();
  }

  show() {
    this.panel.show();
  }

  toggle() {
    if (this.panel.isVisible()) {
      this.hide();
    } else {
      this.show();
    }
  }
}





#2

I have same issue…
there are ‘onDragStart’ and ‘onDragOver’ not fired… (in my custom package - panel…)
Anyone know how to fix it?