Jump to content

Which Clone was Clicked ?

vmars316

By vmars316
in HTML/XHTML

 Share

Recommended Posts

vmars316 Member

vmars316

Posted
Posted

Hello & Thanks :

In code below , how do I tell " dragElement(document.getElementByClassName("myDivClass")); " 

which clone was clicked on ? 

	<!DOCTYPE html>
<html>
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}
.myDivClass {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}
#mydivHdr {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
.myDivHdrClass {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
	</style>
<body>
	<h1>Draggable DIV Element</h1>
	<p>Click and hold the mouse button down while moving the DIV element</p>
	<div id="mydiv" class="myDivClass">
  <div id="mydivHdr" class="myDivHdrClass">Click here to move</div>
  <div contenteditable="true">Type here: </div>
</div>
	<p>Click the button to copy the myDivClass element above, 
<br>including all its attributes and child elements, and append it to the document.</p>
	<button onclick="cloneFunction()">Try it</button>
	<script>
function cloneFunction() {
  var elmnt = document.getElementsByClassName("myDivClass")[0];
  var cln = elmnt.cloneNode(true);
  document.body.appendChild(cln);
}
</script>
	<script>
//Make the DIV element draggagle:
dragElement(document.getElementByClassName("myDivClass"));
	function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "Hdr")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "Hdr").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;
  }
}
</script>
	</body>
</html>

Thanks

Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted (edited)
3 hours ago, dsonesuk said:

Each one you clone you can apply a unique custom data-index ref before you append

Great , but how can I capture that information ?

 

3 hours ago, dsonesuk said:

and you do know all attributes are copied which means you'll have multiple identical id references which should be unique.

I was hoping to avoid problems by setting a dual definition of 'id=' and 'class=' : 

	
.myDivClass {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}
	.myDivHdrClass {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
	
<div id="mydiv" class="myDivClass">
  <div id="mydivHdr" class="myDivHdrClass">Click here to move</div>

 

Edited by vmars316
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

But you will always clone the id as well, you can either do as i suggested in that you use a counter to apply a custom data- index and then read that value when selected, OR use counter to apply unique value for id refence at end when cloned so "mydiv" is changed to for example "mydiv2" for newly cloned element, then "mydiv3" for next and so on...

Edited by dsonesuk
Link to comment
Share on other sites
vmars316 Member

vmars316

Posted
  • Author
Posted
On 8/8/2019 at 1:38 AM, dsonesuk said:

But you will always clone the id as well, you can either do as i suggested in that you use a counter to apply a custom data- index and then read that value when selected, OR use counter to apply unique value for id refence at end when cloned so "mydiv" is changed to for example "mydiv2" for newly cloned element, then "mydiv3" for next and so on...

Ok , I see what you mean , and I am reading up on indexes and arrays .

Thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...