jQuery的投擲的工作不適合動態添加DIVS

Question

我爲This和This

我需要拖拽和縮放功能發出相同的，它工作正常的靜態元素，但我必須添加動態的div，併爲動態的div它調整屬性是工作正常，但可放開功能不工作 ...我最後一天花中的R & d和運用相同的解決方案，但沒有lluck

這裏是一個JSSFiddle

我怎樣才能克服這個

這裏的代碼片斷

CSS

#Section1 > div { 
      display: table-cell; 
      /*width: 1%;*/ 
      border-right: 1px dotted red; 
      text-align: center; 
     } 

HTML

<input type="button" class="Mybutton" value=" Add div" /> 
    <br /> 
    <div class="selectorField" style="height: 100px; width: 100px; background-color: green;"></div> 

    <div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;"> 

     <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div> 

    </div> 

JQUERY

function makeDraggable() { 
      $(".selectorField") 
       .draggable({ 
        containment: $('body'), 
        helper: "clone", 
        stack: "div", 
        cursor: "move", 
        cancel: null 
       }); 
     } 
     $(function() { 
      var _ctrl_index = 1001; 
      $(".Resizable").resizable({ handles: 'e' }); 
      makeDraggable(); 

      $(".droppedFields").droppable({ 
       accept: ":not(.ui-sortable-helper)", 


       drop: function (event, ui) { 
    var draggable = ui.draggable; 
        draggable = draggable.clone(); 
        draggable.appendTo(this); 
        makeDraggable(); 
       } 
      }); 
// add divs dyynamically 
var count = 0; 
      $('.Mybutton').click(function() { 
       count++; 
       if (count < 5) { 
        // alert("aa"); 

        var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1"); 
        a.droppable(); 
        a.resizable({ handles: 'e' }); 
       } 
       else { 
        alert('No more divs to add') 
       } 
      }); 
     }); 

我需要你的幫助

Answer 1

您沒有製作動態格droppable。我已更新您的JSfiddle以反映此更改。請參閱第52行。

Answer 2

請參閱下面的小提琴。

http://jsfiddle.net/tdorbbv6/8/

 function makeDraggable() { 
     $(".selectorField") 
      .draggable({ 
       containment: $('body'), 
       helper: "clone", 
       stack: "div", 
       cursor: "move", 
       cancel: null 
      }); 
    } 
function Droppable(){ 
$(".droppedFields").droppable({ 

      accept: ":not(.ui-sortable-helper)", 


      drop: function (event, ui) { 


       var draggable = ui.draggable; 
       draggable = draggable.clone(); 
       draggable.appendTo(this); 
      // $(ui.draggable).hide(); 

       makeDraggable(); 
      } 
     }); 
} 
     $(function() { 
     var _ctrl_index = 1001; 
     // function docReady() { 


     $(".Resizable").resizable({ handles: 'e' }); 

     makeDraggable(); 




    var count = 0; 
     $('.Mybutton').click(function() { 
      count++; 
      if (count < 5) { 
       // alert("aa"); 

       var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1"); 
       Droppable(); 
       //a.droppable(); 
       //a.resizable({ handles: 'e' }); 
       // a.makedroppable(); { handles: 'e' } 

      } 
      else { 
       alert('No more divs to add') 
      } 
     }); 
    }); 

動態添加控件後，您必須再次爲事件指定控制。把你的代碼放在函數引用裏面。

添加控件後，只需調用該函數來綁定droppable的事件。

希望有所幫助。