Create copy of element on drag and drop using the Angularjs

Question

I am trying to achieve the drag and drop feature using the Angularjs. I need to create a copy of the element every time when the draggable element is dragged and dropped on to the droppable element. I am quite new to Angularjs but I was able to achieve this same thing using jQuery but I am trying to do the same in Angularjs. I have written the directive which will make this thing possible. But for some reason, the DROP function handle drop is never getting called. Although dragstart and dragend are working fine.

I have posted my code here: jqfiddle with the code I have so far including the jQuery which is working

If someone can help me how to achieve this then it would be great. Every time I drop the rectangle box in the droppable field then it should create a new copy of it.

I trying to follow this page and achieve it: https://parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

If there are any better way to achieve this then I am open for that as well.

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