は、だから私はそうのような通常のボックスとイメージも持っている画像の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を追加しました私はイメージが正しいボックス内にある場合、私は持っているカウンタが（私はいくつかの画像と、いくつかを持ってインクリメントするように、次のPHPにそれが計算されますように、PHPのフォームを介してこれを実行したい特定のボックス

<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> 

ボックス）

すなわち。 myimageid == boxid counter ++;

PHPはどのように多くのボックスを表示し、それは重要ではありませんので、ユーザーが正しいだpicutresます。難しい見つける主なものイムは、ちょうどこのイメージは、このボックス

Answer 1

になり、私はあなたが望むものを理解だと思うと言っています。ドロップイベントでは、隠された入力にドロップされたイメージの名前を設定できます。 「ボックス」ごとに1つの隠れた入力を持つ。だから、あなたはその後、「ボックス3」、「BOX3」は「画像2」の値を取得するという隠し入力要素に「画像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>