I suggest you adjust the function where you create the clones. Something like this:
function mousedown(e) {
e.preventDefault();
var evt = e || window.event;
var el = ddData.element = evt.target || evt.srcElement;
var id = ddData.element.id
if (!el || el.tagName == 'svg' || ddData.movidos[id]) return ddData.element = null;
var clone = el.cloneNode(true);
el.id = id + '_' + (ddData.contadorElementos++);
el.parentNode.appendChild(clone);
This way each new clone will have the original ID, and the dragging element (ddData.element
) will have a unique ID formed by the original element ID (img1
or img2
in the example you gave) another part _x
which is the number of ddData.contadorElementos
which is always increasing with each generated element.
That way you always have unique Ids and can fetch the element when you need and whose ID is registered in the keys of your object ddData.movidos
.
You’re already holding the ID on
ddData.movidos
, can you use this ID to recover the data again right? How do you want to recover the data or identify the object?– Sergio
How can I identify, because when I print the array, I don’t know which element was moved. Whatever the image, I only know its id.
– akm
If you know the ID you can do
document.getElementById(id);
right? you can also store in the objectddData.movidos
a field withel: ddData.element
.– Sergio
Yes I know the id, but when I create the clone I get that if it is image 1, the various clones of that image are all '1', if it is image 2, all clones of that image are 2. So I can know what the image is. In the array I have all the positions, but I don’t know which image belongs to, for example if it is the clone of image 1 or 2.
– akm