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

Question

我为 JQuery UI 拖放创建了 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>

这里有两个指令，如果你不熟悉angular js，也可以整理一下。

    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();
                        }
                    });
                }
            }
        })

我知道我正在使用 appendTo: $("#top_board")，它指定应将可拖动元素拖放到此元素，在这种情况下，我使用 element.appendTo("#top_board") 而克隆此元素后删除。

但如果我没有在 draggable 和 droppable 中指定 appendTo，我将无法在可放置区域中复制元素。 简而言之，我只能使用一个可放置的区域。如何解决？

Answer 1

好的，我通过从 ngDraggable 指令中删除 appendTo: $("#top_board") 解决了这个问题。并将element.appendTo('#top_board') 替换为element.appendTo(this)。 实际上，每个ngDroppable 之前都附加到#top-board div。