所以我有一个像这样的常规框和一个图像：
<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 counter ++;
php 只会显示用户正确获得了多少框和 picutres，所以这并不重要。我发现困难的主要事情只是说这个图像进入这个盒子
我想
我明白你想要什么。在拖放事件中，您可以将放置的图像的名称设置为隐藏输入。每个"框"都有一个隐藏的输入。因此，如果将"图像 2"放入"框 3"，则名为"box3"的隐藏输入元素将获取值"图像 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>