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将通过点击团队向自定义框布局显示成员如：点击团队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( ... )功能＆amp; $('#source').droppable(...)函数 AFTER 添加动态元素。

如果要定义它们在添加元素之前，它就不会起作用。

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

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

Jquery拖放动态创建的div live

1 个答案: