拖放不起作用

drag and drop isn't functioning?

本文关键字：不起作用 拖放      更新时间：2023-09-26

我是Javascript的初学者，我正在尝试让图像进入使用css创建的边框，由于某种原因脚本无法正常工作可能是我在代码或其他方面犯了一个小错误。

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

"e"是事件的缩写我有一个：拖动（e）允许下降（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>

这是更正的版本。您错过了一个)字符，我在这里添加了一个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>

看起来代码不适用于图像，因为我从运行代码片段中所能得到的只是"allowDrop"函数的结果。类似于 dragItem 上的错误可能会导致以下情况：

ragstart="drag(event"

缺少结束"）"

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

相关文章：