Drag and drop image around the body with canvas

                  function draggingStarts(e) {

                    theImg = e.target;
                    Xpos = e.offsetX === undefined ? e.layerX : e.offsetX;
                    Ypos = e.offsetY === undefined ? e.layerY : e.offsetY;
                  }
                  function draggingOver(e) {
                    e.preventDefault();
                  }
                  function draggingDrop(e) {
                    e.preventDefault();
                    theImg.style.left = e.pageX - Xpos + "px";
                    theImg.style.top = e.pageY - Ypos + "px";
                  }

                  var body = document.querySelector('body');
                  body.addEventListener('dragstart', draggingStarts, false);
                  body.addEventListener('dragover', draggingOver, false);
                  body.addEventListener('dragend', draggingDrop, false);
 <body> 
         
         <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png'  width="200px" height="150px" style="position: absolute; top:100px;  left: 300px;" draggable="true">
         
         
         <canvas id="display_image" height="200px" width="150px" style="position:absolute; background: transparent; border-style: solid;"> This is my canvas part </canvas>
         
         </body>

I wanted to drag my image around the body. I found this code and copied it exactly, but it doesn't work.

here's my code:

var body = document.querySelector('body');

            function draggingStarts(e){
                theImg = e.target;
                //theImg.style.opacity = '0.2';
                Xpos = e.offsetX === undefined ? e.layerX : e.offsetX;
                Ypos = e.offsetY === undefined ? e.layerY : e.offsetY;
            }
            
            function draggingOver(e){
                e.preventDefault();
            }

            function draggingDrop(e){
                e.preventDefault();
                theImg.style.left = e.pageX - Xpos + "px";
                theImg.style.top = e.pageY - Ypos + "px";
            }


            body.addEventListener('dragstart', draggingStarts, false);
            body.addEventListener('dragover', draggingOver, false);
            body.addEventListener('drop', draggingDrop, false);
     <body> 
     
     <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png'  width="100px" height="80px" style="position: absolute; top:100px;  left: 300px;" draggable="true">
     
     </body>

If you notice I can't drag out the image outside my canvas. Hope somebody can help me out. THANK YOYUUUU

Answers 1

  • New Question

    The image when dropped ends up behind the canvas and can only be visible because the canvas has a background of transparent. The image is then not clickable.

    function draggingStarts(e) {
    
      theImg = e.target;
      Xpos = e.offsetX === undefined ? e.layerX : e.offsetX;
      Ypos = e.offsetY === undefined ? e.layerY : e.offsetY;
    }
    
    function draggingOver(e) {
      e.preventDefault();
    }
    
    function draggingDrop(e) {
      e.preventDefault();
      theImg.style.left = e.pageX - Xpos + "px";
      theImg.style.top = e.pageY - Ypos + "px";
    }
    
    var body = document.querySelector('body');
    body.addEventListener('dragstart', draggingStarts, false);
    body.addEventListener('dragover', draggingOver, false);
    body.addEventListener('dragend', draggingDrop, false);
    <body>
      <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' width="200px" height="150px" style="position: absolute; top:100px;  left: 300px;" draggable="true" />
    
    
      <canvas id="display_image" height="200px" width="150px" style="position:absolute; z-index: -1; background: transparent; border-style: solid;"> This is my canvas part </canvas>
    
    </body>

    Original Question

    Just need to use the event dragend.

    body.addEventListener('drop', draggingDrop, false);
    becomes
    body.addEventListener('dragend', draggingDrop, false);

    This is can be seen because the drop event isn't being triggered when the image is dropped.

    function draggingStarts(e) {
      console.log('dragging starts');
      theImg = e.target;
      //theImg.style.opacity = '0.2';
      Xpos = e.offsetX === undefined ? e.layerX : e.offsetX;
      Ypos = e.offsetY === undefined ? e.layerY : e.offsetY;
    }
    
    function draggingOver(e) {
      console.log('dragging over');
      e.preventDefault();
    }
    
    function draggingDrop(e) {
      console.log('dragging drops');
      e.preventDefault();
      theImg.style.left = e.pageX - Xpos + "px";
      theImg.style.top = e.pageY - Ypos + "px";
    }
    
    var body = document.querySelector('body');
    body.addEventListener('dragstart', draggingStarts, false);
    body.addEventListener('dragover', draggingOver, false);
    body.addEventListener('dragend', draggingDrop, false);
    <body>
      <img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' width="100px" height="80px" style="position: absolute; top:100px;  left: 300px;" draggable="true">
    </body>


Related Articles