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

Posted 2023-05-09

【中文标题】将同一元素拖放到 Jquery UI 中的多个拖放区域

【英文标题】：Drop same element to multiple drop areas in Jquery UI

【发布时间】：2017-12-12 14:29:29

【问题描述】：

我为 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，我将无法在可放置区域中复制元素。 简而言之，我只能使用一个可放置的区域。如何解决？

【问题讨论】：

亲爱的你解决了这个问题吗，请帮助我。我陷入了同样的境地。谢谢。

@Kamlesh 请在下面查看我的答案。

【参考方案1】：

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