Jump to content

Recommended Posts

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

Share this post


Link to post
Share on other sites

Each one you clone you can apply a unique custom data-index ref before you append, and you do know all attributes are copied which means you'll have multiple identical id references which should be unique.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...