Question

我是Javascript的初学者，我正试图让图像进入用css制作的边框内，并且出于某种原因，脚本无法运行，可能是因为我在代码或其他东西。

该代码段工作正常，但不显示图片。

“e”是活动的缩写我有一个：拖动（E）的AllowDrop（e）中和掉落（e）
谢谢

<!doctype html>
<html>

<head>
  <title>drag and drop</title>

  <style type="text/css">
    #targetDiv {
      margin-left: 300px;
      width: 200px;
      height: 150px;
      padding: 10px;
      border: 1px solid #999999;
    }
  </style>

</head>

<body>
  <h1>drag and drop</h1>

  <div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
  <img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />

  <script>
    function drag(e) {
      e.dataTransfer.setData("Text", e.target.id);
    }

    function allowDrop(e) {
      e.preventDefault();
    }

    function drop(e) {
      var dragItem = e.dataTransfer.getData("Text");
      e.preventDefault();
      e.target.appendChild(document.getElementById(dragItem));
    }
//You don't need to edit this one cuz you don't need var var is probably optional 

  </script>

</body>

</html>

Answer 1

这是更正版本。您错过了)个字符，我在此处添加了一个var表达式：take.ms/el76e

<!doctype html>
<html>

<head>
  <title>drag and drop</title>

  <style type="text/css">
    #targetDiv {
      margin-left: 300px;
      width: 200px;
      height: 150px;
      padding: 10px;
      border: 1px solid #999999;
    }
  </style>

</head>

<body>
  <h1>drag and drop</h1>

  <div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
  <img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />

  <script>
    function drag(e) {
      e.dataTransfer.setData("Text", e.target.id);
    }

    function allowDrop(e) {
      e.preventDefault();
    }

    function drop(e) {
      e.preventDefault();
      var dragItem = e.dataTransfer.getData("Text");
      e.target.appendChild(document.getElementById(dragItem));
    }
  </script>

</body>

</html>

Answer 2

看起来代码不能处理图像，因为我可以通过运行代码片段得到的所有内容都是＆＃34; allowDrop＆＃34;功能。像dragItem上的错误可能导致此错误：

ragstart="drag(event"

错过了结束＆＃34;）＆＃34;

我在调试Javascript时总是做的一件事是打开Js控制台（ctrl + shift + j）并在我浏览页面时对其进行监控，可能会出现一个错误信息，否则您将无法运行页面本身。

拖放不起作用？

2 个答案: