Jquery拖放动态创建的div live

Question

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

<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将通过点击团队显示成员的自定义框布局，例如：Clicked Team 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由ajax动态创建。 我无法使用draggable和droppable函数来拖动成员箱。 它是如何工作的？

$(".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');
                }

Answer 1

您必须在添加动态元素后调用$(".memberbox").draggable( ... )函数和$('#source').droppable(...)函数。

如果你定义它们在添加元素之前，它就不会工作。

通常我有makeDraggable()函数，我在其中定义$(".memberbox").draggable( ... ) ＆ $('#source').droppable(...) 。 这样，一旦添加动态元素，我调用makeDraggable()来初始化拖放。

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