拖放 - 如何简化可投放部分？

Question

我创建了拖放工作。在这里，我可以将拖动内容放入特定区域，但我已经为可拖动项目创建了每个可放置的功能。我需要简化它。

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

 }); 

这是我的工作：http://jsfiddle.net/thilakar/u7TnA/

请帮帮我。

由于

Answer 1

您可以定义如下功能。看一下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');
 });      

修改 使用下面的阵列进行更紧凑的硫化。直播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']);    

 });