Drag and drop image around the body with canvas

Question

                  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

abc123 · Accepted Answer · 2017-02-26T01:26:51.190

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>

i got a problem again, I can move it freely around the body. But when I moved it into my canvas I can't retrieve it. I'll update my code. Hope you help me out, for a while. — Khyana, Feb 26 '17 at 01:15
@DownCrow make a new question since moving an element into another element isn't the original question. That way we maintain the information for future users. — abc123, Feb 26 '17 at 01:18
@DownCrow that's because of `position: absolute` if you add `z-index: -1` it will work, basically the image goes behind the canvas and you can't click it. — abc123, Feb 26 '17 at 01:23
oh i remember, it's like I'll be putting my image above the image .. thanks i'll try to work it. — Khyana, Feb 26 '17 at 01:26
@DownCrow i updated my answer above...but googling z-index for the canvas will get you there. — abc123, Feb 26 '17 at 01:27
Thank you so much, I played around the Z-index .. it now works. Do you do canvas? I got another problem but I can't ask after 90mins. I already made my canvas merged together because in the end I'll be turning it to image (success), the problem is the dragged image I put onto my canvas won't join. — Khyana, Feb 26 '17 at 02:02
i managed to post it already, here's the code : http://stackoverflow.com/questions/42464280/merge-dragged-image-in-canvas-into-image — Khyana, Feb 26 '17 at 03:05

score 0 · Answer 2 · answered Feb 26 '17 at 00:35

0

The function's name is preventDefault.

The usage is

e.preventDefault()

answered Feb 26 '17 at 00:35

Dekel

60,707
10
101
129

aww jeez, sorry. there i've updated my codes and so far i got no error but the dragging part isn't working – Khyana Feb 26 '17 at 00:40

samson · Answer 3 · 2017-02-26T00:59:22.037

0

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

edited Feb 26 '17 at 00:59

answered Feb 26 '17 at 00:36

samson

82
10

hello, I've updated my code about that my bad. Still my dragging part isn't working. – Khyana Feb 26 '17 at 00:41
Working fine for me in google chrome, though not in firefox, heres a reference if you want it working in firefox: http://stackoverflow.com/questions/13920345/html-drag-event-does-not-fire-in-firefox – samson Feb 26 '17 at 00:45
I'm not using Firefox, I know its weird. it supposed to be working on my chrome too but not. – Khyana Feb 26 '17 at 00:54
Are you including the javascript file? Post your entire html file – samson Feb 26 '17 at 00:59
it's working fine now thanks. I think it was just the positioning of my codes which is a bit tricky and weird that it didn't work on me. – Khyana Feb 26 '17 at 02:04

Drag and drop image around the body with canvas

3 Answers3

New Question

Original Question