Как я могу проверить, содержит ли div элемент изображения в JavaScript?(Не как фоновое изображение, как содержащийся элемент) - PullRequest
Новая
       9

Как я могу проверить, содержит ли div элемент изображения в JavaScript?(Не как фоновое изображение, как содержащийся элемент)

0 голосов
/ 26 ноября 2018

У меня есть довольно простая программа, которая перемещает изображение дома между 6 различными плитками.Цель здесь следующая:

  • Когда я перетаскиваю дом в пустую травяную камеру, я хочу, чтобы дом переместился в эту камеру.(Это уже работает.)
  • Когда я перетаскиваю дом в клетку, содержащую дом, я хочу, чтобы что-то особенное произошло.(Вызов функции)

Вот мой код: 

<!DOCTYPE HTML>
<html>
<head>
<style>
.cell {
    border-radius:10px;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 5px;
    background-image:url("https://us.123rf.com/450wm/tuulijumala/tuulijumala1602/tuulijumala160200015/52473977-seamless-square-green-grass-texture-.jpg?ver=6");
}
</style>
</head>
<body>

<!--What you actually see-->
<div align="center">
<table>
    <tr>
        <td>
            <div id="gh" class="cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                 <img src="http://worldartsme.com/images/free-house-clipart-1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="100px" height="100px">
            </div>
        </td>

        <td>
            <div class="cell" ondrop="drop(event); yeet();" ondragover="allowDrop(event)"></div>
        </td>

        <td>
            <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </td>
    </tr>

    <tr>
        <td>
            <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </td>

        <td>
            <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                 <img src="http://worldartsme.com/images/free-house-clipart-1.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="100px" height="100px">
            </div>
        </td>

        <td>
            <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </td>
    </tr>

</table>

</div>
<!--///////////////////////-->

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function yeet(){
    alert("ekfui");
}

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

Нет Jquery или библиотеки, пожалуйста

1 Ответ

0 голосов
/ 26 ноября 2018

В вашей функции удаления проверьте, содержит ли событие currentTarget какие-либо теги img: 

if (ev.currentTarget.querySelectorAll('img').length > 0) {
  alert('There\'s already a house there.');
} else {
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

https://jsfiddle.net/xmdkj0y4/

...