Question

我正在尝试创建一个拖放问题，用户将箭头放在照片的特定部分上。照片上将带有4个黑色矩形，标记为A, B, C, D，箭头将为1, 2, 3, 4。我的目标是在（滑轮系统的）照片上方分层放置矩形“放置区域”。然后，箭头将被放置在正确的放置区域中，并且在每个箭头被放置后，它将返回一个表示箭头位置的字符串，即2A, 3B, 4C等。

我现在所拥有的，照片被卡在了dropzone矩形的内部，因此没有箭头可以放在照片的顶部。我希望有人能提供帮助。这就是我所拥有的

``$<!DOCTYPE html>
<html>
<head>
<title>js drag and drop</title>
<style type="text/css">

*
{
    margin: 0px;
    padding: 0px;
}

.dragzone
{
    height: 400px;
    width: 40%;
    border: 2px solid black;
    float: left;
    margin-top: 150px;
    margin-left: 7%;
}

.dropzone
{
    height: 400px;
    width: 40%;
    border: 2px solid black;
    float: left;
    margin-top: 150px;
    margin-left: 7%;

}



</style>
</head>
<body>


<div class="dragzone">

<img src="orange_T.png" id="dragelement" height="80px"     ondragstart="dragStart (event)">

<img src="red_T.png" id="dragelement" height="80px"    ondragstart="dragStart     (event)">
</div>

<div class="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)" >

<div class="picture" >
    <img src="C:\Users\Claire Peters\Desktop\Research\pulleys haptic     screenshots\1.1.png" alt="HTML5 Icon" style="width:400px;height:400px;">

</div>
</div>

<script type="text/javascript" src="index.js"></script>



</body>
</html>

` 和

var id;
 function allowDrop(ev)
{
    ev.preventDefault();
}

function dragStart(ev)
{
    id=ev.target.id;
     //alert(id);
}

 function drop(ev)
{
    ev.target.append(document.getElementById(id));
    event("dropped!")
}

拖放问题分层

0 个答案: