title: drag and drop - how to simplify the droppable part?
body: <p>i have created the drag and drop work. Here i can place the drag content into particular area, but i have create each droppable function for draggable item. i need to simplify that.</p>
  
  <pre><code>$(document).ready(function() {          
      $(".list").draggable({
      helper: 'clone', 
      cursor: 'hand', 
      revert: true,
      drag: function(ev, ui) {    
          dragId = $(this).attr('id');
       }   
      }); 
  
      $("#td1").droppable({
        accept: '#1',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td2").droppable({
        accept: '#1',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td3").droppable({
        accept: '#2',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td4").droppable({
        accept: '#2',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td5").droppable({
        accept: '#3',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td6").droppable({
        accept: '#3',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td7").droppable({
        accept: '#4',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
      $("#td8").droppable({
        accept: '#4',
        activeClass: 'drop-active',
        hoverClass: 'dropareahover',
        drop: function(event, ui) {
          var targetId = $(this).attr("id");
          $("#" + targetId).each(function() {         
              $(this).append(ui.draggable.text());
          });        
        }
      });
  
   }); 
  </code></pre>
  
  <p>This is my work: <a href="http://jsfiddle.net/thilakar/u7TnA/" rel="nofollow">http://jsfiddle.net/thilakar/u7TnA/</a></p>
  
  <p>Please help me out.</p>
  
  <p>Thanks</p>