2

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

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

私を助けてください。

ありがとう

4

1 に答える 1

5

以下のような関数を定義できます。ここでデモを見てください。

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 以下の配列を使用して、よりコンパクトなソリューションを作成します。ここでライブでめ。

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']);    

 });
于 2011-07-19T06:08:11.390 に答える