Question

    
    var result = [];
    document.getElementById("demo").innerHTML = result;

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var imgId = ev.dataTransfer.getData("text");
        var boxId = ev.target.id;
        ev.target.appendChild(document.getElementById(imgId));
        result.push(imgId, boxId);
        document.getElementById("outputBox").innerHTML = result;
    }
    function myFunction() {
        document.getElementById("outputBox").innerHTML = result;
    }

.dragBox {
  height: 150px;
  border: 3px solid blue;
}

<div class="col-md-12">
    <form method="POST" autocomplete="off">

       <div class="col-sm-3">
       <img id="115" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968" class="dragme" height="150" width="100%" draggable="true" ondragstart="drag(event)">
       </div>
              <div class="col-sm-3">
       <img id="116" src="https://helpx.adobe.com/gr_en/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg" class="dragme" height="150" width="100%" draggable="true" ondragstart="drag(event)">
       </div>
        <p id="outputBox"></p>

        <div class="row createWhitespaceBottom" id="fotoblok">
            <div class="col-sm-12 col-md-offset-3">
                <div class="input-group">
                    <input type="hidden" name="questionId" class="form-control" id="questionId" value="<?php echo $question[0]; ?>">
                    <input type="hidden" name="questionType" class="form-control" id="questionType" value="<?php echo $question[1]; ?>">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="dragBox" id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="col-sm-3">
            <div class="dragBox" id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="col-sm-3">
            <div class="dragBox" id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="col-sm-3">
            <div class="dragBox" id="box4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
</div>
<span class="input-group-btn createWhitespaceTop"><button onclick="myFunction()"  id="antwoordblok2" class="btn btn-primary" value="Opslaan">Opslaan</button>
</form>
</div>

我创建了4张图片，应将其拖到4个四个框中。每张图片都属于一个特定的框，单击提交按钮时，我需要检查用户是否已将其拖到正确的框。

问题：用户可以将所有图像拖到同一框中，基本上删除以前的图像。

首选解决方案：当框中已经有图像时，您不能将其他图像拖到该图像上。但是，您可以将图像拖到另一个框中以更正您的答案。

注意：目前，javascript通过innerHTML返回图像和框的ID。我创建这个来检查它的工作。最后，将使用_POST发送此消息，以供PHP处理。

我看了一些已经在stackoverflow上提出的解决方案，但无法使它们起作用。这很可能是由于我不太了解javascript / jQuery。

Answer 1

检查放置的div是否在其中包含img元素，像这样：

if($("#"+ev.target.id).find("img").length==0 && ev.target.tagName!="IMG")

您的放置功能将如下所示：

 function drop(ev) {
        ev.preventDefault();
        var imgId = ev.dataTransfer.getData("text");
        var boxId = ev.target.id;
        if($("#"+ev.target.id).find("img").length==0 && ev.target.tagName!="IMG"){
          ev.target.appendChild(document.getElementById(imgId));
          result.push(imgId, boxId);
          document.getElementById("outputBox").innerHTML = result;
        }
    }

请尽量避免使用标志，因为它们不好用，并且大多数情况下不建议使用全局标志，也不建议使用全局变量。

防止将HTML拖放到已删除其他<img/>的div上

1 个答案: