Drag and Drop in Lightning (simple demo)

DragDrop.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>

DragDrop.css

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

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

After two or three drag and drops the div becomes empty. values in it get disappeared . @brianmfear Can you help me with this

dragging not working on firefox. how it can work on firefox.

After two or three drag and drops the div becomes empty. values in it get disappeared . @brianmfear Can you help me with this

Hi Did you Find the Answer for this

After two or three drag and drops the div becomes empty. values in it get disappeared . @brianmfear Can you help me with this

Hi Did you Find the Answer for this

@srikanthyeturu,

Hi, I'm sorry I missed the original message, but I'll take a look at this. Thanks for bringing it to my attention. I tested this only in Chrome, but I'll give it a try on Firefox. Can you please provide a precise description of what you did to arrive at this situation?

When we moving nultiple times we are missing the divs that's what the problem is ,can you help me how you resolve this ?

…

On Tue, May 25, 2021 at 3:05 AM brianmfear ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ [image: screenshot 2] <https://user-images.githubusercontent.com/29626916/29404566-e99d978a-8358-11e7-8904-ed76aab71c95.png> After two or three drag and drops the div becomes empty. values in it get disappeared . @brianmfear <https://github.com/brianmfear> Can you help me with this Hi Did you Find the Answer for this @srikanthyeturu <https://github.com/srikanthyeturu>, Hi, I'm sorry I missed the original message, but I'll take a look at this. Thanks for bringing it to my attention. I tested this only in Chrome, but I'll give it a try on Firefox. Can you please provide a precise description of what you did to arrive at this situation? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/fb13ac4781c79fad6495ef7dc1676f4f#gistcomment-3755478>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUGLZKNKCYUVT3XKHRY7YJ3TPLBDJANCNFSM45NGLSMQ> .