Jump to content
jamesadrian

Copy Draggable Image

Recommended Posts

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 by jamesadrian

Share this post


Link to post
Share on other sites

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.

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...