In my project, While clicking a button, a div with contentEditable=true will be created on the screen. It should be happened again and again, whenever I am clicking on the button, new div should be created. All those created div should be draggable. For that purpose I am using following function.
function dragElement(elmnt)
{
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header"))
{
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
}
else
{
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e)
{
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e)
{
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement()
{
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
But the problem is, for this function , the ID is needed to drag the object. Here I am creating the div again and again with the same ID. it cause the dragging . So I think I need to create the individual ID. But if I create like that, then how to get the id for dragging function. Please help me.
var marker_tab=document.getElementById('markup');
var main_div = document.createElement('div');
main_div.setAttribute("id","mydiv");
var inner_div=document.createElement('div');
inner_div.setAttribute('id','mydivheader');
inner_div.innerText="\u2756 "
var editable_element=document.createElement('p');
editable_element.setAttribute('id','txt');
editable_element.setAttribute('contentEditable','true');
main_div.appendChild(inner_div);
main_div.appendChild(editable_element);
marker_tab.appendChild(main_div);
dragElement(document.getElementById("mydiv"));
you could do something like this. make elements with a class instead of id this way you can loop through the class and use the this function to grab the div, just an idea, a little sample so you get an idea of what i mean.
let main_div = document.createElement('div');
main_div.className = 'myDiv'
var inner_div=document.createElement('div');
inner_div.className = 'mydivheader';
let mydivheader = document.getElementsByClassName("mydivheader");
for (let i = 0; i < mydivheader.length; i++) {
mydivheader[i].onclick = function() {
let div = this.parentElement;
div.onmousedown = dragMouseDown;
}
}
}
Depending on what the rest of your code looks like, you could use a sequence number that you increment each time to create a unique ID. You may have to use a closure. In React you would use a state variable.
Another alternative could be to use the current time as the ID, for example, elmnt.id = Date.now(). This will work as long as enough time elapses between the creation of each element.
If this is part of a larger project, you may want to use the npm package uuid.
What I gave You was a sample, not a working project (well, it does something that You want, but not everything). The idea is that You mix the code I gave You and integrate it into Your project, otherwise I would be developing Your project .
I don’t mean to be rude, I want You to learn . Try to fix it, research and learn, then come back if the You still don’t understand.