Copy Draggable Image

jamesadrian · March 2, 2018

I have an html page containing javascipt that works. It allows the visitor to the website to drag a small square .png picture (a note) and place it anywhere on the background picture which is a musical staff:

https://www.futurebeacon.com/00Music/stepstaff.htm

I want to enhance it in such a way that when I drag the note from its original position a copy is made that stays at the original position. That way the visitor to the website can drag and place as many notes on the staff as desired and the placement locations would be independent of each other. Here is the source code:

<!DOCTYPE html>

<head>

<title>Note Staff</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

#mydiv {
    position: absolute;
    //z-index: 0;
    //background-color: #FFFFFF;
    //text-align: center;
    // border: 0px solid #FFFFFF;
}

#mydivheader {
    //padding: 0px;
    cursor: move;
    //z-index: 0;
    // background-color: #FFFFFF;
    // color: #000000;
}
</style>

<style></style></head>

<body style="background-image: url(https://www.futurebeacon.com/00Music/cstaffx.png);">

<div style="font-size: 10px; line-height: 10px;">

<div id="mydiv">
  <div id="mydivheader"><img src="https://www.futurebeacon.com/00Music/note.png" width="17" border="1" /></div>
</div>

</div>

<script type="text/javascript">

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

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) {
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
	// get mouse position
    e = e || window.event;
	// transform position to grid
	snapPosition = getSnapPos(e.clientX, e.clientY);

    // set the element's new position:
    elmnt.style.top = snapPosition.y + "px";
    elmnt.style.left = snapPosition.x + "px";
  }

  function getSnapPos(xPos, yPos)
  {
    snapX = 14;
	snapY = 10;
	newX = Math.round(xPos / snapX) * snapX;
	newY = Math.round(yPos / snapY) * snapY;
	return {x:newX, y:newY};
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>



</body>

</html>

------------------------------------------------------

I have no idea where to start investigating how this kind of thing is done. Does anybody here know what I should look into?

Thank you for your help.

Jim Adrian

jim@futurebeacon.com

Edited March 2, 2018 by jamesadrian

justsomeguy · March 2, 2018

You can clone the node:

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

And then append it to the parent. Cloning a node won't copy all of the event listeners though, so you'll need to set up the same event listeners on the cloned node. If you clone a node make sure to change or remove the ID though, only one element can have a given ID.

Sign In

Copy Draggable Image

Recommended Posts

jamesadrian

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity