如何为一个元素的全局变量ondrag事件赋值?

时间:2017-06-19 18:01:52

标签: javascript html

<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>

0 个答案:

没有答案