ドラッグアンドドロップ - ドロップ可能部分を簡略化する方法

Question

ドラッグアンドドロップを作成しました。ここで私は特定の領域にドラッグのコンテンツを配置することができますが、私はdraggableアイテムのための各droppable関数を作成しています。私はそれを単純化する必要があります。

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

あなたは以下のような関数を定義することができます。デモ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以下アレイを使用 よりコンパクトsultion。ライブデモ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']);  

});