HTML5 Drag and Drop with Coordinates

Question

i'm new in Javascript and i got a task which i can't even solve..

I have to get a HTML 5 Drag and Drop, which can add Elements as much as i want, and if i want to edit one of the new elements or change the Position it has to be easy.

This is what it look like now:

http://picul.de/view/HRO

at the moment this don't work as i need..

who can help me?

   var dragok = false;
   var pos;
   
   function allowDrop(e) 
   {
    e.preventDefault();
   }
   
   
   function get_pos(e)
   {
    pos = [e.pageX , e.pageY];
   }
   
   function drag(e) 
   {
    e.dataTransfer.setData("Text",e.target.id);
   }
   
   function drop(e) 
   {
      
        e.preventDefault();
    var canvas = document.getElementById("graphCanvas");
    var ctx    = canvas.getContext("2d");     

    var offset = e.dataTransfer.getData("text/plain").split(',');
    var data=e.dataTransfer.getData("Text");

    var img = canvas = document.getElementById(data);
    var dx = pos[0] - img.offsetLeft;
    var dy = pos[1] - img.offsetTop;
    ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
    
    
   }

   function getCoordinates(e)
   {
   
    var canvas = document.getElementById("graphCanvas");
    var ctx    = canvas.getContext("2d");
    x=ctx.clientX;
    y=ctx.clientY;
    document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
   }

body {
 
 background:#eee;
 
}

#DnDBox {
 
 margin:0 auto;
 margin-top:7vh;
 width:80vw;
 height:80vh;
 padding:1vmax;
 background:#f5f5f5;
 
 /* Erstmal nur zur Übersicht */
 border:1px solid #111;
}

 #DnDBox #canvasBox {
  
  border:1px solid #111;
  
 }
  
 #DnDBox .leftBox {

  float:right;
  width:25%;
  height: 90%;

 }

  #DnDBox .leftBox select{

   width:100%;
   padding:5px;
   margin-bottom:5px;

  }

  #DnDBox .leftBox .dragBox{

   float:right;
   width:100%;
   height: 90%;
   
   /* Erstmal nur zur Übersicht */
   border:1px solid #111; 

  }
  
   #DnDBox .leftBox .dragBox ul{

    list-style-type: none;
    margin: 0;
    padding: 0;

   }
   
    #DnDBox .leftBox .dragBox ul > li{
     
     float:left;
     padding:20px;
     text-align:center;
     background:#eee;
     
    }
    
    #DnDBox .leftBox .dragBox ul > li:hover{
  
     padding:20px;
     text-align:center;
     background:#ddd;
     
    }
  
  #DnDBox .leftBox img{

   cursor:move;
   
  }
  
  #DnDBox .leftBox img:active{

   cursor:move;
   
  }
  
 #DnDBox footer {
 
  float:left;
  margin-top:5px;
  
  padding:5px;
  
  width:100%;

  border:1px solid #111;
  
 } 

  <div id="DnDBox">
   <canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas> 

   <div class="leftBox">

    <select name="plh1">
     <option>Test</option>
     <option>Test 1</option>
     <option>Test 2</option>
     <option>Test 3</option>
    </select>

    <select name="plh2"></select>
    
    <div class="dragBox">
     <ul>
      <li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)"  ondragstart="drag(event)"/></li>
      <li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>    
      <li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>    
     </ul>
    </div>
   </div>
   
   <footer id="footerCoord">asd</footer>
  </div>

greets, daniel

Answer 1

You need to keep track of the elements. The canvas is just a bitmap image with no understanding of what a circle or square is.

Ideas:

(1) Create a separate canvas with a transparent background for each shape that you make and overlay them. When clicking on or touching a point of the canvas repeatedly, cycle through the potential target elements below that event, highlighting them in some way. When the correct element is selected, define an event (a gesture) that will allow the user to select that target for editing. Stop the selection function and initiate the editing function.

(2) Forget the canvas thing, and do it all with SVG

Answer 2

You can't drag an image painted onto a canvas around without additional support - the painted image is just a set of pixels that are part of the canvas's image data.

You may be interested in a canvas library called Fabric.js (tag and homepage). I'm not "recommending" it as such - I haven't used it - but you can certainly drag canvas objects created by the library on the homepage.

A simpler solution might be to use JavaScript/HTML without the canvas. Replace the canvas with, say, a relative DIV element (so it can act as a container for absolutely positioned elements). Then dropping an image on the DIV creates a new Image object (say a clone of the image dragged) and absolutely positions it within the container according to where it was dropped. The new copy of the image can have it's own drag handlers to move it around the container and program options could be added to delete a (cloned) dropped image as necessary.

You could also calculate the position of the mouse relative to the image element when starting a drag operation. This would allow dropping it under the mouse in the same relative position to the mouse cursor as at the start of the drag operation. This question on retrieving the X Y position of an element may be of help. (At the moment the dropped image does not appear under the cursor.)