[英]HTML Drag and Drop API -
This is a simple math game.这是一个简单的数学游戏。
My problem: I cannot drag the images in the middle and drag them to the left side.我的问题:我无法拖动中间的图像并将它们拖动到左侧。 I did some research on the internet but could not find any results.
我在互联网上做了一些研究,但找不到任何结果。
HTML: 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: 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));
}
Well, your trying to getElementByID but your elements dosent have ID.好吧,您尝试 getElementByID 但您的元素没有 ID。 put ID on your elements.
将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.