Есть ли способ отменить appendChild без удаления дочернего узла? - PullRequest
Новая
       13

Есть ли способ отменить appendChild без удаления дочернего узла?

0 голосов
/ 07 мая 2019

У меня есть функция перетаскивания в javascript-игре, которую я создаю в данный момент.Я дал ему условие для прослушивания, если оно соответствует условию, игра перейдет к следующему этапу.(Если числовое изображение соответствует заданному условию, а заданное изображение плода соответствует условию, разрешите сбросить и перезагрузить числовое изображение следующим.) И все эти изображения сохраняются в массивах.Таким образом, чтобы отобразить их, я устанавливаю фоновое изображение div.

Проблема в том, что добавленное изображение фруктов останется в том же положении.Я попытался с помощью removeChild (), но удаляет весь div.Также попытался создать новый div, чтобы заменить удаленный div.Он создает новый div, но остается там, где он был удален.

Есть ли способ отменить appendChild? 

function createDiv() {
    var newDiv = '<div id="fruit2" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>';
    var parentDiv = document.getElementById("fruitCloud2");
    parentDiv.appendChild(newDiv);
}

function stage2() {
    createDiv();
    
    document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[1] + ")";
    document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}

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

function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}

function onDrop(ev) {
  ev.preventDefault();
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[0] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[0] + '")') {
      var dropSource = ev.dataTransfer.getData("fruit");
      ev.target.appendChild(document.getElementById(dropSource));
      stage2();
      ev.target.removeChild(document.getElementById(dropSource));
  }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}

#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}

#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}

#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}

#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}

#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}

#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}

#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}

#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}
<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="javascript.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- --->
<button id="download" onclick="download()"></button>
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>

<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="allowDrop(event)" ></div>

<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>

<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>

</body>
    
</html>

1 Ответ

0 голосов
/ 30 мая 2019

Я нашел ответ на этот вопрос сам. Вместо удаления дочернего элемента (дропсорсинга), я установил видимость скрытого. Затем на следующей стадии я установил его обратно в видимый и добавил плод div к его родительскому div, который является div с id fruitcloud.

...