Drag & Drop


I am creating a package from which I will drag elements to another package.

I am attaching the drag event with jQuery using the following:
$('[draggable]').off('dragstart').on('dragstart', @dragEvent)

Also per this article I applied the following LESS

.mdf-component-tray {
  -webkit-user-drag: element;
  .componentItem {
    -webkit-user-drag: initial;

All I have in my drag event is a debugger, however it is never being hit.

  dragEvent: ->

It appears to me that the dragstart event does not actually fire. I tried switching the event to click for sanity check and the dragEvent function was called.

Am I missing something?

@mark_hahn you did the announcement around drag and drop text, do you have any ideas what I’m doing wrong?


I wasn’t able to use real drag/drop. I had to fake everything. So our code isn’t similar.

Is $('[draggable]') finding anything?


@mark_hahn yeah it is finding all of the elements that have the draggable attribute and binding correctly. I tested by changing the event type to click instead of dragstart. @leedohm have you seen anything around this?


I haven’t done anything with drag-and-drop, no. But I know that there has been some work being done in the Tree View around drag-and-drop. Perhaps looking at some of the related pull requests might help?


Are you seeing the semi-transparent element being dragged? If not the browser isn’t really starting a drag. This would seem like something a google search would help. It doesn’t really have to do with Atom.


@mark_hahn put the exact markup I’m at in this stage of my testing and threw it in JSBin and it gets the transparent drag behavior without any CSS or Javascript. There must be something special about either the version of Chromium in Atom or Atom itself requiring something special to start the dragstart events. @saschagehlich and @maxbrunsfeld I saw you both working on treeview do you have any tips?

<div id="blah" draggable="true">DragMe</div>


I would be surprised if this was the case. Have you tried this on other elements?


This is just a plain’ol div sitting in a left panel. Nothing really special about it. That being said I did not try on other elements, however I am not sure how that would help since click events are working as expected.


I just checked in the development tools and the dragstart event is showing as bound. However dragstart is never triggered when I try to click, hold and move on the element.


Try googling “chromium dragstart not working”.


@mark_hahn everything I have seen from googling points to just adding the CSS attribute for -webkit-user-drag, some articles said to use auto, some said to use element. I tried both. I know it must work somehow in Chromium because treeview uses it here. I have tried using div’s, span’s and even tried a img tag even though thats not what I want. None of them started the drag event. Even though all were showing as bound to the dragstart event in devtools.


That’s truly weird. So it can’t be a problem in the Atom environment.

Sorry, I’m out of intelligent ideas (assuming I had any before). In this situation I would just start to change random things. Trying different types of elements, like anchors or images, adding attributes after a delay or nextTick, etc. Maybe copy as much code as you can from treeview? Change treeview code to look like yours and see if it breaks? Put your code in a different environment like init.coffee?

Computers suck. (grin) I have worked on them for 45 years and the suckage never changes.


So I finally figured it out with a combination of things. The part that was missing and why my event was not firing came down to tabindex. I finally noticed that in this line of code there was a tab index of -1 being used. When I added that to my list dragstart magically started working. Can anyone explain why?


Sounds like the native-key-bindings thing:


I can confirm this unobvious behavior on Atom 1.12.7 Ubuntu 16. I was building my UI on Chrome without trouble, then upon importing it into an Atom Package the drag events were not firing. Came here, added tabindex="-1" to my draggable=“true” elements and everything started working.