Javascript Jquery-我在拖放方面有问题吗？

我已经使用jquery完成了拖放操作。这里我有一个问题，需要将拖动内容（teacher1）放置到特定区域

jquery：

$(document).ready(function() {  

    //var a ='1';
    $(".list").draggable({
    helper: 'clone', 
    cursor: 'hand', 
    revert: true,
    drag: function(ev, ui) {    
        dragId = $(this).attr('id');        
        //alert(dragId);
/*      if (dragId==1) {
            dragClass = "drop1";
        }   
*/     /*else {
         alert('Hi');
       }*/
     }   
    });
    $(".drop1").droppable({
        accept: ".list",
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(ev, ui){
        //var dropDragId = ui.draggable.attr('id');
        //alert(dropDragId)
        var targetId = $(this).attr("id");
        $("#" + targetId).each(function() {         
        $(this).append(ui.draggable.text());                                          
       });
    },
    destroy: function(ev, ui) {
    }
 });      
});
</script>

$（文档）.ready（函数（）{
//var a='1'；
$（“.list”）.draggable({
助手：“克隆”，
光标：'手'，
回复：对，
拖动：函数（ev，ui）{
dragId=$（this.attr（'id'）；
//警报（dragId）；
/*if（dragId==1）{
dragClass=“drop1”；
}   
*//*其他{
警报（“Hi”）；
}*/
}   
});
$（“.drop1”）.dropable({
接受：“.list”，
activeClass:'drop active'，
hoverClass:'dropareahover'，
下拉：功能（ev、ui）{
//var dropDragId=ui.draggable.attr（'id'）；
//警报（dropDragId）
var targetId=$（this.attr（“id”）；
$（“#”+targetId）.each（function（）{
$（this.append（ui.draggable.text（））；
});
},
销毁：功能（ev、ui）{
}
});      
});

Html:

教师1
教师2
教师3
教师4

职业的
英语

数学

法语

印地语
科学

PTE

社会科学

css:

.拖拉{
宽度：400px；
高度：自动；
边框：实心1px#ccc；
}
.dropareahover{
背景色：#EFD2A4；
边框颜色：#DFA853；
}
.退出活动{
背景:#ffff99；
}
draggable先生{
边际：0px；
填充：0px；
}
李先生{
列表样式类型：无；
}
.放下{
宽度：400px；
高度：自动；
保证金：10px 0px 0px 0px；
边框：实心1px#ccc；
}
.drop1{
边框：实心1px#中交；
宽度：100px；
}
.投ul{
边际：0px；
填充：0px；
}
.李小姐{
列表样式类型：无；
}
.tble{边界折叠：折叠；}
.tble td{text align:center；}

我需要放置拖动内容（teacher1）并将其放入职业和印地语，但不是数学。再次拖动teacher2内容并放入英语，但不要放入其他单元格

---

我做了一些工作。但是我不能把老师放在特定的区域。请帮助我。

据我所知，您需要为每个过滤器创建不同的放置区域

使用，您可以创建4个放置区域，每个区域接受一个特殊类

印度教只接受带“.hindu”的

PTE只接受带“.PTE”的

---

我希望这会有所帮助

我为您制作了一把小提琴，让您更容易测试这类问题。谢谢你为我创作了小提琴…：-））是的，你是对的，我只提到了4位老师，但老师增加了更多的意思，我必须以相同的方式编写，或者是否有其他方法来简化，比如说，所有放置区域都有相同的类“.drop”，并且每个区域都有一个特殊的类“.PTEdrop”或“.indudrop”，您可以设置它们的所有共同放置属性，然后执行类似操作：

code

$（“.indu”）.droppable（“选项”，“接受”，“.indu”）; 对于每个放置区域。（这很简单：））

<div class="draggable">
<ul>
<li class="list" id="1">Teacher1</li>
<li class="list" id="2">Teacher2</li>
<li class="list" id="3">Teacher3</li>
<li class="list" id="4">Teacher4</li>
</ul>
</div>
<div class="drop">
<table class="tble">
<tr>
    <td id="td1" class="drop1 br">Vocational</td>
    <td id="td2" class="drop br">English<br /></td>
    <td id="td3" class="drop1 br">Mathematics<br /></td>
    <td id="td4" class="drop br">French<br /></td>
</tr>
<tr>
    <td id="td1a" class="drop br">Hindi</td>
    <td id="td2a" class="drop br">Science<br /></td>
    <td id="td3a" class="drop br">PTE<br /></td>
    <td id="td4a" class="drop br">Social Science<br /></td>
</tr>
</table>
</div>

<style type="text/css">
.draggable {
  width:400px;
  height:auto;
  border:solid 1px #ccc;
}
.dropareahover {
  background-color:#EFD2A4;
  border-color:#DFA853;
}
.drop-active {
 background: #ffff99;
}

.draggable ul {
margin:0px;
padding:0px;
}
.draggable ul li {
list-style-type:none;
}
.drop {
width:400px;
height:auto;
margin:10px 0px 0px 0px;
border:solid 1px #ccc;
}
.drop1 {
border:solid 1px #CCCCCC;
width:100px;
}
.drop ul {
margin:0px;
padding:0px;
}
.drop ul li {
list-style-type:none;
}
.tble{border-collapse:collapse;}
.tble td{text-align:center;}
</style>