2

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();
    }
})
5

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);
    },
............

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.