Question

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.

$(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());
        });        
      }
    });

 }); 

This is my work: http://jsfiddle.net/thilakar/u7TnA/

Please help me out.

Thanks

Answer 1

You can define a function like below. Look at demo here.

function drop(selector, a) {
   $(selector).droppable({
      accept: a,
      activeClass: 'drop-active',
      hoverClass: 'dropareahover',
      drop: function(event, ui) {
        var targetId = $(this).attr("id");
        $("#" + targetId).each(function() {             
            $(this).append(ui.draggable.text());
        });        
      }
    });    
}

$(document).ready(function() {            
    $(".list").draggable({
    helper: 'clone', 
    cursor: 'hand', 
    revert: true,
    drag: function(ev, ui) {    
        dragId = $(this).attr('id');
     }     
    });    

    drop("#td1", '#1');
    drop("#td2", '#1');
    drop("#td3", '#2');
    drop("#td4", '#2');
    drop("#td5", '#3');
    drop("#td6", '#3');
    drop("#td7", '#4');
    drop("#td8", '#4');
 });      

EDIT
More compact sultion using arrays below. Live deme here.

function drop2(teacher, subjects) {
    $.each(subjects, function(index, subject) {
       $(subject).droppable({
          accept: teacher,
          activeClass: 'drop-active',
          hoverClass: 'dropareahover',
          drop: function(event, ui) {
            var targetId = $(this).attr("id");
            $("#" + targetId).each(function() {             
                $(this).append(ui.draggable.text());
            });        
          }
        });                
    });
}

$(document).ready(function() {            
    $(".list").draggable({
    helper: 'clone', 
    cursor: 'hand', 
    revert: true,
    drag: function(ev, ui) {    
        dragId = $(this).attr('id');
     }     
    });    

    drop2('#1',['#td1', '#td2']);
    drop2('#2',['#td3', '#td4']);
    drop2('#3',['#td5', '#td6']);
    drop2('#4',['#td7', '#td8']);    

 });