Question

我正在开发我的游戏，但是我有一些问题...

1。。如果图像位于类 .room 中，则该图像具有另一个src，但如果将其放在类 .items 中，它应该变成一个图标。然后，如果将其再次拖到 .room 上，它将返回。
2。。有很多不同的图像，所以我想进行切换。如果拖动的对象拖到 .items ，则图像应更改。因此图片的ID应该转到交换机，并检查ID和大小写是否相同。 scr应该来自图标。

3。。如果可以的话，我希望将图像ID保存在local.storage中，以便可以在下一页中使用对象

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

Answer 1

关于第三个问题-保存到localStorage：将以下代码添加到您的放置函数中。

localStorage.setItem("name", data);

用开关拖放更改图像

1 个答案: