JQuery - у меня проблемы с перетаскиванием?

Question

Я сделал перетаскивание с помощью 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>

Html

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

CSS:

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

Мне нужно поместить перетаскиваемый контент (teacher1) и перейти к профессиональному и хинди, но не к математике. Снова перетащите содержимое teacher2 и перейдите на английский, но не в другую ячейку.

Я кое-что сделал. но я не могу поместить учителя2 в определенную область. пожалуйста, помогите мне.

Answer 1

Насколько я понимаю, вам нужно создать отдельную область отбрасывания для каждого фильтра

с помощью http://jqueryui.com/demos/droppable/#accepted-elements вы можете создать 4 области отбрасывания, и каждая из них принимает специальный класс.

индус принимает только тех, у кого ".hindu"

PTE принимает только тех, у кого ".PTE"

Надеюсь, это поможет