HTML 拖放 API -答案

【问题标题】：HTML Drag and Drop API -HTML 拖放 API -
【发布时间】：2018-11-04 17:08:50
【问题描述】：

这是一个简单的数学游戏。

我的问题：我无法将图像拖到中间并将它们拖到左侧。我在互联网上做了一些研究，但没有找到任何结果。

HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styleSheet.css" />
  <script src="myScript.js"></script>
</head>
<body>
  <!--İŞLEMLER-->
  <div id="islemler">
    <!--1.İŞLEM-->
    <div>
      <img src="images/question-mark.png" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <img src="images/plus.png">
      <img src="images/question-mark.png" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <img src="images/equal.png">
      <img src="images/eight.png">
    </div>


  </div>
  <!--TAŞINACAK RAKAMLAR-->
  <div id="tasinacakRakamlar">
    <img src="images/three.png" draggable="true" ondragstart="dragstartHandler(event)">
    <img src="images/five.png" draggable="true" ondragstart="dragstartHandler(event)">
  </div>
</body>
</html>

JS：

function dragstartHandler(e){
    e.dataTransfer.setData("text",e.target.id);
}

function dragoverHandler(e){
    e.preventDefault();
    //e.dataTransfer.dropEffect="copy";
}

function dropHandler(e){
    e.preventDefault();
    var myData = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(myData));
}

【问题讨论】：

你的问题是什么？你想完成什么？
我想把tasinacakrakamlar的图片（images/three.png和five.png）拖到问号上。
欢迎来到 Stack Overflow！其他用户将您的问题标记为低质量和需要改进。我重新措辞/格式化您的输入，使其更容易阅读/理解。请查看我的更改以确保它们反映您的意图。但我认为你的问题仍然无法回答。你现在应该edit你的问题，添加缺失的细节（见minimal reproducible example）。如果您对我有其他问题或反馈，请随时给我留言。

标签： javascript html api drag-and-drop

【解决方案1】：

好吧，您尝试 getElementByID 但您的元素没有 ID。将 ID 放在您的元素上。

function dragstartHandler(e){
    e.dataTransfer.setData("text",e.target.id);
}

function dragoverHandler(e){
    e.preventDefault();
    //e.dataTransfer.dropEffect="copy";
}

function dropHandler(e){
    e.preventDefault();
    var myData = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(myData));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styleSheet.css" />
  <script src="myScript.js"></script>
</head>
<body>
  <!--İŞLEMLER-->
  <div id="islemler">
    <!--1.İŞLEM-->
    <div>
      <img src="images/question-mark.png" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <img src="images/plus.png">
      <img src="images/question-mark.png" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <img src="images/equal.png">
      <img src="images/eight.png">
    </div>


  </div>
  <!--TAŞINACAK RAKAMLAR-->
  <div id="tasinacakRakamlar">
    <img src="images/three.png" draggable="true" id="ele1" ondragstart="dragstartHandler(event)">
    <img src="images/five.png" draggable="true" id="ele2" ondragstart="dragstartHandler(event)">
  </div>
</body>
</html>

【讨论】：