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生活

回答

相关问题