1

我目前正在制作一个拖放表单，我已经完成了搜索代码并且可以正常工作。

最初的工作代码以复选框开始，但客户更喜欢拖放。

因此，我正在更改现有代码以适应拖放操作，但我无法弄清楚如何将拖动项目的 ID 传递到表单提交时选择的框中。

Javascript：

var count = 0;
var MAXCLASS = 7;
//var checkbox = new Array();
var message = "You have selected the class limit, any more and it will seriously increase the waiting time for results";

function dragUser(form, event) {
event.dataTransfer.setData('Class', form.id);}
    function dropUser(target, event) {
var form = event.dataTransfer.getData('Class');
target.appendChild(document.getElementById(form)); 
count--;}

function chosenDropUser(target, event) {
if(count == MAXCLASS){
    alert(message);
}
else{
    var form = event.dataTransfer.getData('Class');
    target.appendChild(document.getElementById(form)); 
    count++;
}
}

html:

 <form action="http://localhost/dragtest/demo/searchCode.php" name="classes"
    method="POST" id="form">

    <div><p>Please enter a search query</p>
    <input name="query" type="text" /></div>

<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
    Unassigned
    <a draggable="true" class="form" id="class1" ondragstart="dragUser(this, event)">Class 1.</a>
    <a draggable="true" class="form" id="class2" ondragstart="dragUser(this, event)">Class 2.</a> 
    <a draggable="true" class="form" id="class3" ondragstart="dragUser(this, event)">Class 3.</a> 
    <a draggable="true" class="form" id="class4" ondragstart="dragUser(this, event)">Class 4.</a> 
    <a draggable="true" class="form" id="class5" ondragstart="dragUser(this, event)">Class 5.</a> 
    <a draggable="true" class="form" id="class6" ondragstart="dragUser(this, event)">Class 6.</a> 
    <a draggable="true" class="form" id="class7" ondragstart="dragUser(this, event)">Class 7.</a> 
    <a draggable="true" class="form" id="class8" ondragstart="dragUser(this, event)">Class 8.</a> 
    <a draggable="true" class="form" id="class9" ondragstart="dragUser(this, event)">Class 9.</a> 
    <a draggable="true" class="form" id="class10" ondragstart="dragUser(this, event)">Class 10.</a> 
    <a draggable="true" class="form" id="class11" ondragstart="dragUser(this, event)">Class 11.</a> 
    <a draggable="true" class="form" id="class12" ondragstart="dragUser(this, event)">Class 12.</a> 
    <a draggable="true" class="form" id="class13" ondragstart="dragUser(this, event)">Class 13.</a> 
    <a draggable="true" class="form" id="class14" ondragstart="dragUser(this, event)">Class 14.</a> 
    <a draggable="true" class="form" id="class15" ondragstart="dragUser(this, event)">Class 15.</a> 
    <a draggable="true" class="form" id="class16" ondragstart="dragUser(this, event)">Class 16.</a> 
    <a draggable="true" class="form" id="class17" ondragstart="dragUser(this, event)">Class 17.</a> 
    <a draggable="true" class="form" id="class18" ondragstart="dragUser(this, event)">Class 18.</a> 
</div>
<div id="chosen" ondrop="chosenDropUser(this, event)" ondragenter="return false" ondragover="return false">
    Chosen
</div>
<input name="submit" id="submit" type="submit" value="Send" />          
</form>
4

0 回答 0