draggable="true" is not working in firefox for Lightning Component

Question

draggable="true" is not working in firefox. The following code working fine in chrome,but not in firefox. DragDropDemo.app

<aura:application >
    <aura:attribute name="values"
                    type="String[]"
                    access="private" />
    <aura:attribute name="dragid"
                    type="Integer"
                    access="private" />
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}" />
    <div class="droparea" 
         ondragover="{!c.cancel}" 
         ondragenter="{!c.cancel}"
         ondrop="{!c.drop}">
        <aura:iteration items="{!v.values}"
                        indexVar="index"
                        var="value">
            <div class="row" 
                 draggable="true"
                 ondragstart="{!c.dragstart}"
                 data-drag-id="{!index}">
                {!value}
            </div>
        </aura:iteration>
    </div>
</aura:application>

DragDropDemo.css

.THIS.droparea{
    border: 1px solid black;
    position: relative;
    margin: 3px;
}
.THIS.droparea .row {
    position: relative;
    border: 1px solid red;
    padding: 3px;
    margin: 3px;
}

DragDropDemoController.js

({
    doInit: function(component, event, helper) {
        var values = "a b c d e".split(' ');
        component.set("v.values", values);
    },
    dragstart: function(component, event, helper) {
        component.set("v.dragid", event.target.dataset.dragId);
    },
    drop: function(component, event, helper) {
        var dragId = component.get("v.dragid"),
            values = component.get("v.values"),
            temp;
        temp = values[dragId];
        values[dragId] = values[event.target.dataset.dragId];
        values[event.target.dataset.dragId] = temp;
        component.set("v.values", values);
        event.preventDefault();
    },
    cancel: function(component, event, helper) {
        event.preventDefault();
    }
})

Answer 1

As per this blog post "To make an element draggable set draggable attribute to "true". However this is not enough to make elements draggable in Firefox. You need to locate the dragstart event and set some data on the DataTransfer object:"

draggableElement.addEventListener('dragstart', function(e){
  e.dataTransfer.setData('text', 'foo');
});

In your controller you can add event.dataTransfer.setData('Text', component.id); and it will start working in Firefox

............
    dragstart: function(component, event, helper) {
        component.set("v.dragid", event.target.dataset.dragId);
        event.dataTransfer.setData('Text', component.id);
    },
............