Javascript Jquery在动态创建的div live上拖放

我在页面上有两个DIV区域。 左侧DIV将显示类别 例如： 1.A队 2.B队 3.C队 . .

---

添加动态元素后，必须调用

$（“.memberbox”）.draggable（…）

函数&

$（'#source'）.dropable（…）

函数

如果在添加元素之前定义它们，那么它将不起作用

通常我有

makeDraggable（）

函数，我在其中定义了

$（“.memberbox”）.draggable（…）

&

$（'#source'）。dropable（…）

。这样，一旦添加了动态元素，我就调用

makeDraggable（）

来初始化拖放

这种机制的另一个优点是，如果必须删除并添加另一组元素，即使这样，也可以再次调用同一个函数，它将初始化drag n drop

<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 id="dest">
<div class="memberbox" id="Amember">Peter</div>
<div class="memberbox" id="Bmember">Chris</div>
<div class="memberbox" id="Cmember">Rick</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');
                }