Created a code snippet for enabling drag and drop functionality of elements within the same window, which is working smoothly.
var currentDragElement = null;
var draggableElements = document.querySelectorAll('[draggable="true"]');
[].forEach.call(draggableElements, function(element) {
element.addEventListener('dragstart', handleDragStart, false);
element.addEventListener('dragenter', handleDragEnter, false);
element.addEventListener('dragover', handleDragOver, false);
element.addEventListener('dragleave', handleDragLeave, false);
element.addEventListener('drop', handleDrop, false);
element.addEventListener('dragend', handleDragEnd, false);
});
function handleDragStart(event) {
currentDragElement = event.target;
event.dataTransfer.setData("text/plain", event.target.dataset.uuid);
}
function handleDragOver(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(event) {
this.classList.add('over');
}
function handleDragLeave(event) {
this.classList.remove('over');
}
function handleDrop(event) {
event.stopPropagation();
event.preventDefault();
if(currentDragElement == event.target) {
return;
}
console.log('dragged element ', currentDragElement.dataset.uuid , ' on element ', event.target.dataset.uuid)
return false;
}
function handleDragEnd(event) {
[].forEach.call(draggableElements, function (element) {
element.classList.remove('over');
});
}section {
border: solid 5px green;
margin: 20px;
float: left;
width: 40%;
}
[draggable="true"]:hover {
opacity: 0.6;
}
[draggable="true"] {
cursor: move;
background-color: #acacac;
padding: 10px;
margin: 10px;
}
.over[draggable="true"] {
background-color: orange;
}<section>
<div draggable="true" data-uuid="1.1">draggable 1.1</div>
<div draggable="true" data-uuid="1.2">draggable 1.2</div>
<div draggable="true" data-uuid="1.3">draggable 1.3</div>
</section>
<section>
<div draggable="true" data-uuid="2.1">draggable 2.1</div>
<div draggable="true" data-uuid="2.2">draggable 2.2</div>
<div draggable="true" data-uuid="2.3">draggable 2.3</div>
</section>However, I am aiming to extend this feature by allowing users to drag and drop the draggable="true" elements between two separate windows or tabs in the same browser session.
The current implementation does not support this functionality because:
var currentDragElement = null;
remains null when dragging from another window/tab. My question is, how can I capture the drag start element even if initiated from a different window or tab within the same browser session? The goal is to have the console display the same information regardless of whether the drag and drop occurs within the same window or across different windows.
Kindly refrain from providing solutions using jQuery, thank you for your assistance!