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);
}
hi @Mandar Rahate could you please explain by screenshot? what do you mean by jump into sections?
Thanks