Move elements from one div to another to modify a map

Its a page of a project with Blazor, .NET and JS.

I am trying to modify a map based on the positions of each element, and my problem is that when I try to move from the "drawing-list" element (it is a div where there are three elements that you can drag and move it to the main div to add more elements to the map if you wish.) nothing happens, but then when modifying it is not draggable within the main div, and all dragging elements are blocked.

The code (script) of a drawing-list:

window.initializeSortableForDrawings = () => {
const mapContainer = document.querySelector('.map-container');
const drawingList = document.querySelector('.drawing-list');

if (mapContainer && drawingList) {
Sortable.create(drawingList, {
group: {
name: "drawings",
pull: "clone",
put: false
},
sort: false
});

Sortable.create(mapContainer, {
group: "drawings",
onAdd: function (evt) {
const itemEl = evt.item;
const dibujoId = itemEl.id.replace('dibujo-list-', '');

// Clonar el elemento arrastrado
var clonedElement = itemEl.cloneNode(true);
clonedElement.id = `dibujo-${dibujoId}`;
clonedElement.removeAttribute('draggable');
clonedElement.style.position = 'absolute';

// Obtener las coordenadas del evento de arrastre y soltar
const containerRect = evt.target.getBoundingClientRect();
clonedElement.style.left = `${evt.clientX}px`;
clonedElement.style.top = `${evt.clientY}px`;

// Añadir el elemento clonado al zoom-container
evt.target.appendChild(clonedElement);

// Eliminar el original para evitar duplicación
evt.from.removeChild(itemEl);

console.log(`Dibujo ${dibujoId} añadido al mapa.`);

// Verifica si dotNetRef está definido antes de llamar a invokeMethodAsync
if (dotNetRef) {
dotNetRef.invokeMethodAsync('ActualizarMapa')
.then(() => {
console.log('Mapa actualizado.');
})
.catch(error => console.error('Error al actualizar el mapa:', error));
} else {
console.error('dotNetRef no está definido.');
}
}
});
}
};

// Permite que el contenedor acepte elementos arrastrados
function allowDrop(ev) {
ev.preventDefault();
}

// Llamado cuando se inicia el arrastre
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.dataset.dibujoId); // Guardar el ID del dibujo
}

// Llamado mientras se está arrastrando
function dragging(ev) {
ev.preventDefault();
var dibujoId = ev.dataTransfer.getData("text");
var dibujoElement = document.getElementById('dibujo-list-' + dibujoId);

// Crear una versión visual mientras se arrastra
var previewElement = document.getElementById('drag-preview');
if (!previewElement) {
previewElement = dibujoElement.cloneNode(true);
previewElement.id = 'drag-preview';
previewElement.style.position = 'fixed';
previewElement.style.pointerEvents = 'none'; // Evita interacciones con el elemento mientras se arrastra
previewElement.style.zIndex = '1000';
document.body.appendChild(previewElement);
}

// Actualiza la posición del preview mientras se arrastra
previewElement.style.left = ev.clientX + 'px';
previewElement.style.top = ev.clientY + 'px';
}

// Llamado cuando se suelta el elemento
function drop(ev) {
ev.preventDefault();
var dibujoId = ev.dataTransfer.getData("text"); // Obtener el ID del dibujo
var dibujoElement = document.getElementById('dibujo-list-' + dibujoId);

// Clonar el elemento arrastrado y agregarlo al contenedor del mapa (zoom-container)
var clonedElement = dibujoElement.cloneNode(true);
clonedElement.removeAttribute('draggable'); // No permitir arrastrar el elemento nuevamente
clonedElement.style.position = 'absolute'; // Posicionar el elemento en el mapa

// Posicionarlo en las coordenadas donde se suelta
const containerRect = ev.target.getBoundingClientRect();
clonedElement.style.left = (ev.clientX - containerRect.left) + 'px';
clonedElement.style.top = (ev.clientY - containerRect.top) + 'px';

// Agregar el elemento clonado al contenedor de zoom
ev.target.appendChild(clonedElement);

// Eliminar el preview del arrastre
var previewElement = document.getElementById('drag-preview');
if (previewElement) {
previewElement.remove();
}

// RE-RENDERIZADO
clonedElement.style.display = 'none';
requestAnimationFrame(() => {
clonedElement.style.display = '';
});

dotNetRef.invokeMethodAsync('ActualizarMapa')
.then(() => {
logMessage('Mapa actualizado en Blazor.');
})
.catch(error => {
logMessage('Error al actualizar el mapa:', error);
});
}


The code of the main div:

window.initializeSortable = () => {
const tryInitialize = () => {
const container = document.querySelector('.zoom-container');
if (container) {
logMessage('Contenedor encontrado:', container);

Sortable.create(container, {
animation: 150,
onStart: (evt) => {
const element = evt.item;
element.classList.add("dragging");
logMessage(`Iniciando arrastre para: ${element.id}`);
DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', true)
.catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
},
onEnd: (evt) => {
const element = evt.item;
element.classList.remove("dragging");
const elementId = evt.item.id.replace('dibujo-', '');

const rect = element.getBoundingClientRect();

const container = document.querySelector('.map-container');
const containerRect = container.getBoundingClientRect();

const newX = Math.round(rect.left - containerRect.left);
const newY = Math.round(rect.top - containerRect.top);

logMessage(`Elemento ${elementId} movido a X: ${newX}, Y: ${newY}`);

dotNetRef.invokeMethodAsync('UpdateElementPositionAsync', parseInt(elementId), newX, newY)
.catch(error => logMessage(`Error al actualizar la posición: ${error}`));

DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', false)
.catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
},
onMove: (evt) => {
const element = evt.dragged;
const container = document.querySelector('.map-container');
const containerRect = container.getBoundingClientRect();

// Usamos el evento original del mouse para obtener las coordenadas correctas
const mouseEvent = evt.originalEvent;
const newX = Math.round(mouseEvent.clientX - containerRect.left - element.offsetWidth / 2);
const newY = Math.round(mouseEvent.clientY - containerRect.top - element.offsetHeight / 2);

// Actualizar la posición del elemento en tiempo real
element.style.left = `${newX}px`;
element.style.top = `${newY}px`;

logMessage(`Moviendo elemento: ${element.id}, X: ${newX}, Y: ${newY}`);
}
});
} else {
logMessage('Sortable: el contenedor no se encontró, reintentando...');
setTimeout(tryInitialize, 100); // Reintento después de 100ms
}
};

tryInitialize();
};


The complete code is here:

https://github.com/MarcomedSoltel/Problem/commit/b384ca942e2858774706d69dda74b01226bf4ead

Try to solve it by debugging to see what could happen. I also try to give a unique id to each new element, but all I can think of is that the changes are not updated well visually or why the positions are 1,1 instead of dragging it correctly on the map. I'm a little stuck on this, and I don't really know how to move forward.

Continue reading...