Lightning Components – How to Implement Drag and Drop

I am trying to drag and drop images from one block into another and if in the block an image is already present then those images must get swaped

Best Answer

Ok Akarsh I hope the below code will fulfil your requirement.

While dragging I'm saving the element id and its parent elements id in startid and parentid. Now i am creating a new document fragment which contains the element thats being dragged and appending the fragment to event.target.id

Component

<aura:component implements="force:appHostable">
    <aura:attribute name="startId" type="string"/>
    <aura:attribute name="parentId" type="string"/>

    <div class="div1" id="div1" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
        <img src="{!$Resource.Pic1}" draggable="true" ondragstart="{!c.drag}" id="drag1" width="88" height="31"/>
    </div>

    <div class="div2" id="div2" ondrop="{!c.drop}" ondragover="{!c.allowDrop}">
        <img src="{!$Resource.Pic2}" draggable="true" ondragstart="{!c.drag}" id="drag2" width="88" height="31"/>
    </div>
    <input type="button" onclick="{!c.MoveDiv}" value="Click Me" />
    <div class="div2" id="div3" ondrop="{!c.drop}" ondragover="{!c.allowDrop}"><span id="drag3"> </span></div>

</aura:component>

Controller

({
    allowDrop: function(cmp, event, helper){
        event.preventDefault();
    },
    drag: function(cmp, ev, helper){
          var parentId = document.getElementById(ev.target.id).parentElement.id;
        cmp.set("v.startId",ev.target.id);
        cmp.set("v.parentId",parentId);
    },
    drop: function(cmp, ev, helper){
        var drag = cmp.get("v.startId");
        var div = ev.target.id;
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.getElementById(drag));
        document.getElementById(div).appendChild(fragment);
        var c = document.getElementById(div).children;
        var x = document.getElementById('drag1').parentElement.id;
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.getElementById(c[0].id));
        document.getElementById(cmp.get("v.parentId")).appendChild(fragment);
    }
})

Style

.THIS.div1 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
.THIS.div2 {
    float: left;
    width: 300px;
    height: 100px;
    margin: 20px;
    padding: 10px;
    border: 1px solid black;
}
Related Topic