javascript - 如何使某个框等于图像 HTML 的位置

Question

所以我有一个像这样的常规盒子和一个图像:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="Adho-Mukha-Vrksasana.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

我添加了 JS，以便您可以将任何图像拖放到这个特定的框中

<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));
}
</script>

我想通过 php 表单运行它，以便在下一个 php 中它将计算图像是否在正确的框中，以便我的计数器将增加(我有几个图像和几个框)

即。 myimageid == boxid 计数器++;

php 只会显示用户正确的方框和图片数量，因此这并不重要。我发现困难的主要事情是只是说这张图片进入这个盒子

Answer 1

我想我明白你想要什么。在放置事件中，您可以将放置到隐藏输入的图像的名称设置为隐藏输入。每个“盒子”有一个隐藏输入。因此，如果将“image 2”放入“box 3”中，则名为“box3”的隐藏输入元素将获得值“image 2”。将它们放入表格中，然后提交。所以基本上:

JS

function drop {
//your code, and then something like
var id=data; //e.g, "#drag1"
var dropArea=ev.target.id; //e.g, "#drop2";
//just get the number
var number=data.replace(/^[0-9]/g,""); // e.g, "2"
var input=document.querySelector('input[name="box'+number+'"]');//grabs an input called "box2"
input.setAttribute("value", id); //store the fact that we dropped "drag1" input "box2"
}

HTML

<form action=someAction.php>
<input type=hidden name=box1 />
<input type=hidden name=box2 />
<input type=hidden name=box3 />
<button type="submit">Submit</button>
</form>

下面是一个完整的工作示例。

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

    }
    function drag(ev) {
        ev.dataTransfer.setData("id", ev.target.id);
        ev.dataTransfer.setData("name", ev.target.dataset.name);
    }
    function drop(ev) {
        console.log(ev);
        ev.preventDefault();
        var data = ev.dataTransfer.getData("id");
        var name = ev.dataTransfer.getData("name");
        ev.target.appendChild(document.getElementById(data));
        updateMapping(ev, data, name);
    }
//maintain a mapping of images<->boxes
    var boxes = ["", "", "", ""];
    function updateMapping(ev, data, name) {
        var boxName = ev.target.dataset.id; //box1
        var boxNumber = parseInt(boxName.replace("box", "")); //1
//remove all instances of data from the array
        prepArray(name);
//add back to the array
        boxes[boxNumber] = name;
//map the array to the form inputs
        updateForm();
    }
    function prepArray(name) {
//remove all instances of data from the array
        for (var i = 1; i <= 3; i++) {
            if (boxes[i] === name) {
                boxes[i] = "";
            }
        }
    }
    function updateForm() {
        //apply the array to the form
        for (var i = 1; i <= 3; i++) {
                    var boxName = "box" + i;
                    var name = boxes[i];
                    var input = document.querySelector('input[name="' + boxName + '"]')
                    input.setAttribute("value", name);
                }

            }

.dropzone, .dragImage{
        width:100px;
        height:142px;
        display:inline-block;
    }
.dropzone{

        border:1px solid black;
    }
.popout:hover{
  background-color:black;
  color:white;
 }

<!-- boxes -->
<div id="div1" data-id="box1" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" data-id="box2" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" data-id="box3" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<hr />
<!-- images -->
<img class="dragImage" data-name="mountain" id="drag1" src="http://i.tcgplayer.com/71491_200w.jpg" draggable="true" ondragstart="drag(event)">
<img class="dragImage" data-name="island" id="drag2" src="http://i.tcgplayer.com/71485_200w.jpg" draggable="true" ondragstart="drag(event)">
<img class="dragImage" data-name="swamp" id="drag3" src="http://i.tcgplayer.com/71507.jpg" draggable="true" ondragstart="drag(event)">

<!-- form -->
<form action="whatever.php">
Box 1:<input type=text name=box1><br />
Box 2:<input type=text name=box2><br />
Box 3:<input type=text name=box3><br />
<button type="submit">Submit</button>
</form>