6

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

1
  • Can you please post the code which you've tried along with the question? @Akarsh
    – SE_User
    Commented Jan 18, 2017 at 12:30

1 Answer 1

8

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;
}
2
  • 5
    Can you describe the working? Code without explanation is considered bad. Commented Jan 18, 2017 at 12:38
  • @PranayJaiswal 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
    – david raj
    Commented Jan 20, 2017 at 7:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .