javascript - 使用开关拖放更改图像

问题描述

我正在开发我的游戏，但我遇到了一些问题......

1.如果图像在.room类中，它有另一个 src，但如果你把它放在.items类中，它应该变成一个图标。如果你再次将它拖到.room，它会转回来。
2.有很多不同的图像，所以我想要一个开关。如果拖动的 objekt 正在拖动到.items图像应该改变。所以图像的 id 应该去 switch 并检查 id 和 case 是否相同。scr 应该来自图标。

3.如果可能的话，我想在 local.storage 中保护图像的 id，以便我可以在下一页中使用 objekt

<html>
<head>
<style>
.room {
    width: 500px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
.items {
    width: 500px;
    height: 150px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
    if (ev.target.className === "items") {
        ev.target.style.border = "3px dashed black";
    }
    ev.preventDefault(); 
}

function drag(ev) {
    ev.dataTransfer.setData("img", ev.target.id);
}

function dragleave(ev) {
    if (ev.target.className === "items") {
        ev.target.style.border = "0px dashed transparent";
    }
}

function drop(ev) {
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("img");
    ev.target.style.border = "0px dashed transparent";
    if (ev.target=="[object HTMLImageElement]"){
           ev.target = ev.target.parentNode;
        }
    else { 
        ev.target.appendChild(document.getElementById(data));
    }

if (ev.target.id === ev.dataTransfer.getData("ori")) {
  return;
}
    var image = document.createElement("img");
    image.id = 
    image.draggable = true;
    image.addEventListener('dragstart', drag);
    if (ev.target.className === 'items') {
      icon();
    } else if (ev.target.className === 'room') {
      room();
    }
    var originEle = document.getElementById(ev.dataTransfer.getData("ori"));
    originEle.outerHTML = '';
    delete originEle;
    ev.target.appendChild(image);
}    

function icon(){
    switch(image.id) {
           case "teddy":     image.src="pic/Icons/teddy.png";break;
           case "book":     image.src="pic/Icons/Buch.png";break;
    }
}
function room(){ 
    switch(image.id) {
           case "teddy":     image.src= "pic/Home/HomeRoom_booksL.png";break;
           case "booksR":     image.src= "pic/Home/HomeRoom_buch.png";break;}
}

function reset(){
    var container = document.getElementById("field");
    container.innerHTML= html;
}                
var html;
window.onload = function(){
    html = document.getElementById('field').innerHTML;
};  

</script>
</head>
<body>
<h2>Drag and Drop</h2>
<div>
    <div class="room" ondrop="drop(event)" ondragover="allowDrop(event)">

    </div>
    <h2>items</h2>
    <div class="items" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img id="book" src="pic/Icons/Buch.png" draggable="true" ondragstart="drag(event)" id="drag1">

        <img id="teddy" alt="booksL"src="pic/Home/HomeRoom_teddy.png" id="drag2" draggable="true" ondragstart="drag(event)" >
    </div>
</div>
</body>
</html>

标签： javascripthtmldrag-and-dropswitch-statement

javascript - 使用开关拖放更改图像

问题描述

解决方案

推荐阅读