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>

如果你不熟悉角度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”），它指定应该将draggable元素删除到此元素，在这种情况下，我使用element.appendTo（“＃top_board”）克隆此元素后删除。

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

Answer 1

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

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

1 个答案: