Drag and drop image around the body with canvas

311
March 02, 2017, at 09:43 AM

                  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

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

Answer 2

The function's name is preventDefault.

The usage is

e.preventDefault()
Answer 3

the function you're trying to call is named preventDefault() and not preventdefault()

READ ALSO
hide form items with dynamic class name in jquery

hide form items with dynamic class name in jquery

I am trying to use class name to hide a class, for example:

307
Ajax for retrieving data and changing elements based on data retrieved

Ajax for retrieving data and changing elements based on data retrieved

This is more of an informational question, and perhaps the question is not well formatted, but I wouldn't know how to explain it any better

198
Access variable outside $.each LOOP

Access variable outside $.each LOOP

How can I access appraisalAddress outside the $each loop so that is is available within the showMap function? Is this possible? I am running this code in a appery

267
how to get to a text in a div to console log that test in jquery

how to get to a text in a div to console log that test in jquery

I am trying to get to a text in a div to make a var == that textmy code is

349