使用 Angularjs 在拖放时创建元素的副本答案

【问题标题】：Create copy of element on drag and drop using the Angularjs使用 Angularjs 在拖放时创建元素的副本
【发布时间】：2020-11-09 01:41:32
【问题描述】：

我正在尝试使用 Angularjs 实现拖放功能。每次将draggable 元素拖放到droppable 元素上时，我都需要创建该元素的副本。我对 Angularjs 很陌生，但我能够使用 jQuery 实现同样的事情，但我试图在 Angularjs 中做同样的事情。我已经编写了使这件事成为可能的指令。但由于某种原因，DROP 函数 handle drop 永远不会被调用。虽然dragstart 和dragend 工作正常。

我已经在这里发布了我的代码：jqfiddle with the code I have so far including the jQuery which is working

如果有人可以帮助我实现这一目标，那就太好了。每次我将 rectangle 框放在可放置字段中时，它都会创建一个新副本。

我试图关注这个页面并实现它：https://parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

如果有更好的方法来实现这一点，那么我也愿意接受。

【问题讨论】：

在做了一些研究之后，我能够做到。发布答案，因为它可能对将来的某人有用。

标签： javascript jquery angularjs angularjs-directive drag-and-drop

【解决方案1】：

<div class="row">
    <div class="col-sm-3" class="draggable-elements">
        <div draggable draggable="true" class="draggable" id="RootBox" style="width:250px;height:100px;border:1px solid #000;" ></div>
    </div>
</div>

<div class="row">
    <div  class="col-sm-6">
        <div droppable droppable="true" id="DroppableCanvas" class="droppable-elements" style="border:3px dashed #111;height:400px"></div>
    </div>  
</div>


var app     =   angular.module("test",  []);

app.directive('draggable', function() {
    return function(scope, element) {
        // this gives us the native JS object
        var el = element[0];

        el.draggable = true;

        el.addEventListener(
            'dragstart',
            function(e) {
                e.dataTransfer.effectAllowed = 'move';
                //e.dataTransfer.setData('Text', this.id);
                e.dataTransfer.setData("text/html", e.target.id);
                this.classList.add('drag');
                return false;
            },
            false
        );

        el.addEventListener(
            'dragend',
            function(e) {
                this.classList.remove('drag');
                return false;
            },
            false
        );
    }
});

app.directive('droppable', function () {
    return {
        restrict: 'A',
        scope: {
            index: '@'
        },
        link: function (scope, element, attrs) {
            element[0].addEventListener('drop', scope.handleDrop, false);
            element[0].addEventListener('dragover', scope.handleDragOver, false);
        },
        controller: function($scope) {
            $scope.handleDrop = function (e) {
                console.log('DROP COMPLETE');
                e.preventDefault();
                e.stopPropagation();
                var data        =   e.dataTransfer.getData("text/html");
                var nodeCopy    =   document.getElementById(data).cloneNode(true);
                e.target.appendChild(nodeCopy);
            };

            $scope.handleDragOver = function (e) {
                e.preventDefault();
                return;
            };
        }
    };
});

【讨论】：