Jump to content

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:


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>


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


#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;


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


<script type="text/javascript">

//Make the DIV element draggagle:

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;




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








Edited by jamesadrian
Link to comment
Share on other sites

You can clone the node:


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.

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

  • Create New...