How to Create the drop-target directive in angularJs?

Answer 1

Create two directives: Draggable and DropTarget. Items that going to be “dragged” are decorated with Draggable directive and the container where the items are dropped is decorated with DropTarget directive.

// DraggableDirective.js
var Draggable = function () {

    return {
        restrict: "A",
        link: function(scope, element, attributes, ctlr) {
            element.attr("draggable", true);

            element.bind("dragstart", function(eventObject) {
                eventObject.originalEvent.dataTransfer.setData("text", attributes.itemid);
            });
        }
    };
}

// DropTargetDirective.js
var DropTarget= function () {

    return {
        restrict: "A",
        link: function (scope, element, attributes, ctlr) {

            element.bind("dragover", function(eventObject){
                eventObject.preventDefault();
            });

            element.bind("drop", function(eventObject) {

                // invoke controller/scope move method
                scope.moveToBox(parseInt(eventObject.originalEvent.dataTransfer.getData("text")));

                // cancel actual UI element from dropping, since the angular will recreate a the UI element
                eventObject.preventDefault();
            });
        }
    };
}