<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
3个可拖动的对象,每个对象执行特定的功能 需要更改全局变量值&#34; elDragged&#34;每次将这些段落拖到框中。
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)"
draggable="true" id="dragtarget1" eldraged.value = 1>Drag me #1!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)"
draggable="true" id="dragtarget2" eldraged.value = 2 >Drag me #2!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)"
draggable="true" id="dragtarget3" eldraged.value = 3>Drag me #3!</p>
</div>
<!-- Empty Drag Box-->
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
我已经设置了下面的代码,以测试它不是
的全局变化
<p id="demo"></p>
<script>
var eldraged ="";
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = eldraged + " " + "Dragging";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = eldraged + " " + "Dropped";
function processChoice()
}
当drop事件发生时,它应该为特定拖放事件的值指定全局变量。那么全局变量的编号定义了下面函数的调用。无论我放弃什么以及如何尝试,我都无法通过那种全球化的东西。基本上每个drop都被赋予了自己的功能,可以在我的主程序中的画布上绘制
//functions for each separate draged item
function processChoice(){
switch (elDraged ) {
case 1:
//Does Work for drag1
Function1();
break;
case 2:
//Does Work for drag2
Function2();;
break;
case 3:
//Does Work for drag3
Function3();;
break;
}
</script>
</body>