title: Jquery - i have problem with drag and drop?
body: <p>i have done drag and drop using with jquery. here i have issue that need to place the drag content(teacher1) into specific area.</p>
  
  <p>jquery:</p>
  
  <pre><code>$(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) {
      }
   });      
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="draggable"&gt;
  &lt;ul&gt;
  &lt;li class="list" id="1"&gt;Teacher1&lt;/li&gt;
  &lt;li class="list" id="2"&gt;Teacher2&lt;/li&gt;
  &lt;li class="list" id="3"&gt;Teacher3&lt;/li&gt;
  &lt;li class="list" id="4"&gt;Teacher4&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="drop"&gt;
  &lt;table class="tble"&gt;
  &lt;tr&gt;
      &lt;td id="td1" class="drop1 br"&gt;Vocational&lt;/td&gt;
      &lt;td id="td2" class="drop br"&gt;English&lt;br /&gt;&lt;/td&gt;
      &lt;td id="td3" class="drop1 br"&gt;Mathematics&lt;br /&gt;&lt;/td&gt;
      &lt;td id="td4" class="drop br"&gt;French&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td id="td1a" class="drop br"&gt;Hindi&lt;/td&gt;
      &lt;td id="td2a" class="drop br"&gt;Science&lt;br /&gt;&lt;/td&gt;
      &lt;td id="td3a" class="drop br"&gt;PTE&lt;br /&gt;&lt;/td&gt;
      &lt;td id="td4a" class="drop br"&gt;Social Science&lt;br /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .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;}
  &lt;/style&gt;
  </code></pre>
  
  <p>i need to place the drag content(teacher1) and drop into vocational and hindi, but not in mathematics. Again drag the teacher2 content and drop into english, but not other cell.</p>
  
  <p>i have done somework. but i can't able place the teacher2 into specific area. please help me out.</p>