Skip to main content

Suppose I have 3 section(as flex container) and if I try to jump a box from section1 or section2 into section 3 have can I do this?

 

here is the My code help me accordingly .

 

html

<template>

    <lightning-card title="Drag and Drop Test" >

        

            <div class="slds-p-around_small">

                <div class="my-front"  id="section1">Section 1 :  </div>

                

                <div class="flex-container" ondragover={allowDrop} ondrop={drop}>

                    <div id="D1" class="square" draggable="true" ondragstart={drag}>

                        1

                    </div>

                    <div id="D2" class="square" draggable="true" ondragstart={drag}>

                       2

                    </div>

                    <div id="D3" class="square" draggable="true" ondragstart={drag}>

                        3

                    </div>

                </div>

                <hr class="bold-border"></hr>

                <div class="my-front" id="section2">Section 2 :  </div>

                <div class="flex-container" ondragover={allowDrop} ondrop={drop}>

                    <div id="D4" class="square" draggable="true" ondragstart={drag}  >

                        4

                    </div>

                </div>

                <hr class="bold-border"></hr>

                <div class="my-front" id="section3">Section 3 :  </div>

                <div class="flex-container" ondragover={allowDrop} ondrop={noDrop}>

                </div>

                <hr class="bold-border"></hr>

            </div>

        

    </lightning-card>

</template>

===========================================

.js

 

import { LightningElement} from 'lwc';

export default class DragAndDrop extends LightningElement {

   

    drag(event){

        event.dataTransfer.setData("divId", event.target.id);

       }

 

    allowDrop(event){

      

        event.preventDefault();

        

    }

    drop(event){

        event.preventDefault();

        

        var divId = event.dataTransfer.getData("divId");

        

        var draggedElement = this.template.querySelector('#' +divId); //# as ID atribute

       

        draggedElement.classList.add('completed'); 

        

        event.target.appendChild(draggedElement);

        

      // alert(divId + ' is Dragging into other Section  ' + section.id);

    

    }

 

@* Salesforce Developers *

2 risposte
0/9000