jquery拖放動態創建div生活

我有2個DIV區域在頁面上。左側DIV將顯示牌號如： 1.隊伍A 2.隊伍B 3.隊伍C 。。。jquery拖放動態創建div生活

<div id="source"> 
<div class="box" id="A">1.Team A</div> 
<div class="box" id="B">2.Team B</div> 
<div class="box" id="C">3.Team C</div> 
</div>

右手邊DIV將顯示自定義對話框佈局成員點擊團隊如：被點擊的A隊

<div id="dest"> 
<div class="memberbox" id="Amember">Peter</div> 
<div class="memberbox" id="Bmember">Chris</div> 
<div class="memberbox" id="Cmember">Rick</div> 
</div>

右手邊DIV動態阿賈克斯創建。我無法使用拖動和拖放功能拖動成員框。它是如何工作的？

$(".memberbox").draggable(
         { 
          cursor: "move", 
          helper: 'clone', 
          appendTo: 'body', 
          zIndex: '999', 
          cursorAt: {top: 15, left: 15}, 
          revert: true, 
          scroll: false, 
          addClasses:true, 
          drag: function(event, ui) { 
           this.style.borderColor = 'red'; 
          }, 
          stop: function(event, ui) { 
           this.style.borderColor = 'black'; 
          } 


         } 
       ); 
       $('#source').droppable({ 
        activeClass: "active", 
        hoverClass: "hover", 
        drop: handleDropEvent 
       }); 
       function handleDropEvent(event, ui) { 
          var draggable = ui.draggable; 
          console.log(draggable); 
        $(draggable).appendTo('#source'); 
       }

來源

2014-04-03 user2520217

你必須調用$(".memberbox").draggable(...)功能& $('#source').droppable(...)功能後添加動態元素。

如果你正在定義它們在添加元素之前，它不會工作。

通常我有makeDraggable()函數，其中我定義了$(".memberbox").draggable(...) & $('#source').droppable(...)。這樣，一旦添加了動態元素，我就調用makeDraggable()來初始化拖放。

此機制的另一個優點是，如果您必須刪除並添加另一組元素，那麼即使您可以再次調用相同的函數，它也會初始化拖放。

來源

2014-04-07 05:52:55 Nis

jquery拖放動態創建div生活

回答

相關問題