div中的拖放交换不起作用

时间：2016-01-12 12:53:26

标签： javascript html css drag-and-drop

我试图让拖放交换工作在可见的div中，但它不起作用。当我尝试将代码drop="swapDrop(event)"应用于可见div时，图像直接与可见div交换，而不是进入可见div。如果没有drop="swapDrop(event)"，图像将无法在可见div内交换。而且当我将图像从不可见的div拖动到可见的div时，来自不可见div的图像将会消失。此外，在隐形div中，应该是交换。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<body bgcolor="H70D4R334">
<title>Ordinate</title>
<head>
    <style text/css> 

 #div1 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 400px;
  border: 0px solid blue;
}

#div2 {
  float: left;
  width: 50px;
  height: 50px;
  margin-left: 7px;
  margin-top: 50px;
  border: 0px solid blue;
}

#div3 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div4 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div5 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div6 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div7 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div8 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 50px;
  margin-left: 7px;
  border: 0px solid green;
}

#div10 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 400px;
  border: 1px solid green;
}

#div11 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div12 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div13 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div14 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div15 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div16 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#div17 {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 100px;
  margin-left: 5px;
  border: 1px solid green;
}

#Button {
  float: center;
  width: 200px;
  height: 50px;
  margin: 25px;
}


</style>



<script>
var dragSrcEl = null;
var draggSrcID = null;

    function dragStart(ev) {
    draggSrcID = ev.target.id;
    dragSrcEl = ev.target;
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData('text/html', ev.target.outerHTML);
    }

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

    function drop(ev) {
        ev.target.appendChild(document.getElementById(draggSrcID));
        ev.preventDefault();
    } 

    function swapDrop(ev) {

      if (ev.stopPropagation) {
        ev.stopPropagation(); // Stops some browsers from redirecting.
      }

      // Don't do anything if dropping the same image we're dragging.
      if (dragSrcEl != ev.target) {
        // Set the source image to the HTML of the image we're dropping on.
        srcEl = document.getElementById(draggSrcID);
        srcEl.outerHTML = ev.target.outerHTML;
        ev.target.outerHTML = ev.dataTransfer.getData('text/html');
       }
        ev.preventDefault();
    }       

</script>   
</head>
<body>
<center><font size="10">Ordinate</font></center>
    <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    </div>
    <div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div> 
    <div id="div1" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
    <img id="D" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=D&w=50&h=50" draggable="true" ondragstart="dragStart(event)" />
    </div>
    <div id="div2" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
    <img id="E" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=E&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
    </div>
    <div id="div3" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
    <img id="I" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=I&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
    </div>
    <div id="div4" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
    <img id="T" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=T&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
    </div>
    <div id="div5" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
    <img id="A" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=A&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
    </div>
    <div id="div6" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
    <img id="N" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=N&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
    </div>
    <div id="div7" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
    <img id="O" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=O&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
    </div>
    <div id="div8" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
    <img id="R" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=R&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
    </div>
    <center><input id="Button" type="submit" value="Click me to check" onclick="HitEnter()"></center>
    <script>
        word = "ordinate"
        function HitEnter() {
            for (i = 10, str = ""; i <= 17; i++) {
                if (document.getElementById("div" + i).childNodes.length > 1) {
                    str += document.getElementById("div" + i).childNodes[1].id
                }
            }
            if (str.toLowerCase() == word) {
                alert("Good job!!!")
            }
            else {
            alert('You got the word incorrect! Please try again.')

            }
        }
    </script>
</body>
</html>

如果您可以直接编辑代码，那将非常有用，因为我是初学者。

如果您想直接编辑代码，请输入以下链接：https://jsfiddle.net/wyq5oke1/2/

我会欣赏任何答案，对于正在观看的人，我将非常感谢您找到一位可以解决问题的朋友（如果他们知道如何）。

0 个答案:

没有答案
相关问题
最新问题