Javascript 在Jquery UI中将同一元素拖放到多个拖放区域

我已经为jQueryUI拖放创建了Angular指令。我在右侧有一个容器，其中包含可拖动元素，如下所示：

左侧有两个容器，应为上述可拖动元件的可放下区域：

            <div ng-show="content == 'first'" class="product-large" id="top_board" ng-droppable></div>


<div ng-show="content == 'third'" class="container product-section"></div>

我知道我正在使用appendTo:$（“#top_board”），它指定应将可拖动元素拖放到此元素，在本例中，我在克隆此元素后拖放时使用element.appendTo（“#top_board”）

但如果我没有在可拖动的和可拖放的中指定

附加到
，我就无法在可拖放区域中复制元素。
简而言之，我坚持只使用一个可拖放区域。如何分类？
好的，我通过从
ngDraggable
指令中删除
附录：$（“#顶板”）
解决了这个问题。并将
元素.appendTo（“#top_board”）
替换为
元素.appendTo（this）
。
实际上，以前每个
ngDroppable
都是附加到
#top board
div上的。
您解决了这个问题吗亲爱的，请帮助我。我也陷入了同样的境地。谢谢。@Kamlesh请检查下面我的答案。
    app.directive('ngDraggable', function ($document) {
        return {
            restrict: 'A',
            scope: {
                dragOptions: '=ngDraggable'
            },
            link: function (scope, elem, attr) {
                $(elem).draggable({
                    appendTo: $("#top_board"),
                    revert: 'invalid',
                    helper: 'clone'
                });


            }
        }
    })

        app.directive('ngDroppable', function ($document) {
            return {
                link: function (scope, elem, attr) {
                    $(elem).droppable({
                        accept: '.dragSigners',
                        drop: function (event, ui) {
                            var element = ui.helper.clone();
                            element.appendTo('#top_board');
                            element.removeAttr("ng-draggable");
                            element.removeClass("ng-isolate-scope dragSigners ui-draggable ui-draggable-dragging col-lg-4 col-sm-4 col-sm-6");

   //to make dropped element be draggable in containment after dropping
                            element.draggable({ cancel: false, containment: "#top_board" });

                            element.find("a.delete-btn").css("right", "0px");
                            element.css("margin-bottom", "0px");

                            element.find("a:nth-child(1) > img.thumbnail").css("margin-bottom","0px");


                            //un comment it to remove borders of dropped image
                            //element.find("a:nth-child(1) > img.thumbnail").removeClass("thumbnail");


                            element.resizable({ 
                                resize: function (event, ui) {
                                    ui.element.find("a:nth-child(1) > img.thumbnail").width(ui.element.width());
                                    ui.element.find("a:nth-child(1) > img.thumbnail").height(ui.element.height());

                                },

                                stop: function (event, ui) {
                                    ui.element.find("a:nth-child(1) > img.thumbnail").width(ui.element.width());
                                    ui.element.find("a:nth-child(1) > img.thumbnail").height(ui.element.height());
                                }
                            });

                            element.find("a.delete-btn").click(function () {
                                $(this).closest("div").remove();
                            });

                            element.mouseover(function () {
                                $(this).find("a.delete-btn").show();

                            });

                            element.mouseleave(function () {
                                $(this).find("a.delete-btn").hide();

                            });

                            //element.attr('id', 'mytestId');
                            //$('#mytestId').draggable();
                        }
                    });
                }
            }
        })