Question

＆＃13;

                  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);

＆＃13;

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

＆＃13;

我想把我的图像拖到身体上。我找到了这段代码并完全复制了它，但它没有用。

这是我的代码：

＆＃13;

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);

＆＃13;

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

＆＃13;

如果您发现我无法将图片拖出画布外。希望有人可以帮助我。谢谢YOYUUUU

Answer 1

新问题

放下的图像最终会在画布后面显示，并且只能显示，因为画布的背景是透明的。然后，图像无法点击。

＆＃13;

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);

＆＃13;

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

＆＃13;

原始问题

只需要使用事件dragend。

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

这是可以看到的，因为在删除图像时不会触发drop事件。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

该功能的名称为preventDefault。

用法是

e.preventDefault()

Answer 3

您尝试调用的函数名为preventDefault（）而不是preventdefault（）

使用画布在身体周围拖放图像

3 个答案:

新问题

原始问题