Making div move-able/ draggable inside a div

Question

I currently working on my project that require to make a div able to move around on certain area. Below is my code.

                    <div id="toolbox">
                        <img id="drag1" src="images/3E.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
                        <img id="drag2" src="images/3E-Logo.png" draggable="true" ondragstart="drag(event)" width="100" height="100">
                    </div>`

And this is the script I using.

    <script>
    var box = document.getElementById("div1");

    var boxLeft = box.offsetLeft;
    var boxTop = box.offsetTop;
    box.ondrop = drop;
    box.ondragover = allowDrop;

    var img = document.getElementById("drag1");
    img.onmousedown = mousedown;
    img.ondragstart = dragstart;


    var startOffsetX, startOffsetY;

    function allowDrop(ev) {
    ev.preventDefault();
    }


    function mousedown(ev) {
startOffsetX = ev.offsetX;
startOffsetY = ev.offsetY;
    }




    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {

   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   var nodeCopy = document.getElementById(data).cloneNode(true);

   var dropX = ev.clientX - 650;
   var dropY = ev.clientY- 45;
   nodeCopy.setAttribute("style","position:absolute; top:" + dropY + "px; left:" + dropX + "px;");
   nodeCopy.id =  "draggable";
   ev.target.appendChild(nodeCopy);
   ev.stopPropagation();
   return false;

  }

Which I will drag the images inside the div id="toolbox" to the div id="box" and make a copy there to drag around inside the box. And I also looking for a way to save the div box content as a picture (jpg file). My project will be based on html and javascript. Any idea ? Thanks.