如何做出了一定的盒子等于

Question

所以我有一个像这样正规盒和图像也将图像HTML的位置：

<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用户得到正确的，所以并不重要。我发现困难的主要事情只是说这个图像进入这个盒子

Answer 1

我想我明白你想要什么。在放置事件中，可以将放置图像的名称设置为隐藏输入。每个“框”有一个隐藏的输入。因此，如果将“图像2”放入“方框3”中，则称为“方框3”的隐藏输入元素将获得值“图像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>