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();
}
})
Best Answer
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:"