jquery在droppable中添加的類如果外部放置事件不能調整大小

Question

當在這個放置區域中放置某些東西時，該對象將被克隆並獲得部分類。

$('.drop').droppable({ 
    tolerance: 'fit', 
    accept: '.drag, .part', 
    drop: function (event, ui) { 
     var top = ui.position.top; 
     var left = ui.position.left; 
     var posizione = ui.position; 

     if ($(ui.helper).hasClass('drag')) { 
      $(this).append($(ui.helper).clone()); 
      $('#board .drag').addClass("part"); 
      $('.part').removeClass("drag"); 
     }; 
     .... 
)}; 

有辦法給doppable /拖動/調整大小的屬性設置爲「部分」類沒有做這裏面放置事件，但外面定義它？因爲使其工作的唯一方法是給予內部放置功能。

工作

$('.drop').droppable({ 
    tolerance: 'fit', 
    accept: '.drag, .part', 
    drop: function (event, ui) { 
     var top = ui.position.top; 
     var left = ui.position.left; 
     var posizione = ui.position; 

     if ($(ui.helper).hasClass('drag')) { 
      $(this).append($(ui.helper).clone()); 
      $('#board .drag').addClass("part"); 
      $('.part').removeClass("drag"); 
     }; 

     $('.part').resizable({ 
      containment: "#board", 
      aspectRatio: true 
     }); 
     .... 
)}; 

NOT WORK

$('.drop').droppable({ 
    tolerance: 'fit', 
    accept: '.drag, .part', 
    drop: function (event, ui) { 
     var top = ui.position.top; 
     var left = ui.position.left; 
     var posizione = ui.position; 

     if ($(ui.helper).hasClass('drag')) { 
      $(this).append($(ui.helper).clone()); 
      $('#board .drag').addClass("part"); 
      $('.part').removeClass("drag"); 
     }; 

     .... 
)}; 
$('.part').resizable({ 
      containment: "#workarea", 
      aspectRatio: true 
}); 

我是新來的JavaScript和jQuery，所以如果你發現其他錯誤，請報告。 感謝您的幫助。

編輯：完整的代碼http://jsfiddle.net/funnydj/qtBfJ/2/

Answer 1

通過解決jQuery的收集$('.part')的drop處理程序中，你會影響文檔中的所有元素與class="part"。

通常，只需要處理剛剛被刪除/克隆的元素，並且假定給出該元素class="part"，我猜測只有它需要解決。所有以前丟棄/克隆的元素應該已經得到適當的處理。

如果我是正確的，那麼你可能想是這樣的：

$('.drop').droppable({ 
    tolerance: 'fit', 
    accept: '.drag, .part', 
    drop: function (event, ui) { 
     var top = ui.position.top; 
     var left = ui.position.left; 
     var posizione = ui.position; 

     if(ui.helper.hasClass('drag')) { 
      var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part"); 
      $part.appendTo($(this)); 
      $part.resizable({ 
       containment: "#board", 
       aspectRatio: true 
      }); 
      $part.draggable({ 
       tolerance: 'fit', 
       revert: 'invalid', //resterà non valido finchè non droppo in un punto valido 
       containment: "#workarea", 
       stop: function() { 
        var top2 = ui.position.top; 
        var left2 = ui.position.left; 
        $("#workarea").append('<div>spostata</div>'); 
        $(this).draggable('option', 'revert', 'invalid'); //quando lo lascio torna indietro perche' il revert è invalid' 
       } 
      }); 
      $part.droppable({ 
       greedy: true, 
       //tolerance: 'intersect', 
       drop: function (event, ui) { 
        if (!$(ui.helper).hasClass('part')) { 
         ui.draggable.draggable('option', 'revert', true); 
        } 
       } 
      }); 
     }; 
     inserite++; 
     $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>'); 
    } 
}); 

你可以通過定義外部範圍中選擇，地圖顯著收拾東西，但他們必須在裏面使用。

我可能會做這樣的事情：

var inserite = 0; 

part_options = { 
    resizable: function(ui) { 
     return { 
      ... 
     } 
    }, 
    draggable: function(ui) { 
     return { 
      ... 
     } 
    }, 
    droppable: function(ui) { 
     return { 
      ... 
     } 
    } 
}; 


$('.drop').droppable({ 
    tolerance: 'fit', 
    accept: '.drag, .part', 
    drop: function (event, ui) { 
     var top = ui.position.top; 
     var left = ui.position.left; 
     var posizione = ui.position; 

     if(ui.helper.hasClass('drag')) { 
      var $part = ui.helper.clone().removeClass("drag ui-draggable-dragging").addClass("part"); 
      $part.appendTo($(this)); 
      $part.resizable(part_options.resizable.call(this, ui)); 
      $part.draggable(part_options.draggable.call(this, ui)); 
      $part.droppable(part_options.droppable.call(this, ui)); 
      //or one long chained command if you prefer. 
     }; 
     inserite++; 
     $("#workarea").append('<div>' + top + '-' + left + '--' + inserite + '</div>'); 
    } 
});