JQuery 可拖动对象，使用动态 div 标签设置包含

Question

我有多个可以拖动对象的 div 标签。 我想将可拖动对象包含到 div 标签中。这些 div 标签是动态生成的。

为了做到这一点，我意识到我必须列出所有的 div 容器。这些仅在程序最初运行时可用。 然后我可以使用返回的 div 列表设置包含。

我的问题是包含功能仅适用于第一个 div 而不是其他的。

我希望有一个解决方案，可以将拖动的对象移动到动态生成的 div 标签内的任何位置

请参阅下面我用来检索动态生成的 div 标签并将它们设置为包含选项的代码。

谁能解释我如何使用动态生成的 div 设置包含并限制拖动到这些 div 的对象？。

                //Handle object drop in div area
            function handleContainmentDIVs() {
                var id;
                var i = 0;

                $("div[id$='pnlPdfPage']").each(function () {
                    if (i == 0)
                        id = $(this);
                    else
                        id = id.add($(this));

                    i++;
                }
                    );

                return id;
            }

//Make element droppable
                $(".droppablePage").droppable({
                    accept: '.existingFieldItem, .existingPageObject',
                    containment: handleContainmentDIVs()
};



                    //Make element draggable
                $(".draggableItem").draggable({
                    //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
                    helper: function () {
                        return $(this).clone().appendTo('body').css({
                            'zIndex': 5
                        });
                    },
                    revert: "invalid",
                    cursor: 'move',
                    containment: handleContainmentDIVs()
                });

Answer 1

我找到了解决这个问题的方法。基本上我添加了 mouseover 事件处理程序来返回更新的 Draggable 区域。