Angular directive D&D

Faire du Drag&Drop avec angular pour frangular

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ColumnController">
    <div ng-repeat="c in columns" class="column" drag="$index" dragStyle="columnDrag"
    drop="$index" dropStyle="columnDrop">{{c.title}}</div>
</div>

CSS

.column {
    width: 50px;
    height: 50px;
    background-color: red;
    text-align: center;
    border: 1px solid black;
    display:inline-block;
    margin: 50px;
}
.columnDrag {
    opacity: 0.7;
    background-color: blue;
}
.columnDrop {
    background-color: green;
}

JavaScript

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

app.directive("drag", ["$rootScope", function ($rootScope) {

    function dragStart(evt, element, dragStyle) {
        element.addClass(dragStyle);
        evt.dataTransfer.setData("id", evt.target.id);
        evt.dataTransfer.effectAllowed = 'move';
    };

    function dragEnd(evt, element, dragStyle) {
        element.removeClass(dragStyle);
    };

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('draggable', 'true');
            scope.dragStyle = attrs["dragstyle"];
            element.bind('dragstart', function (evt) {
                $rootScope.draggedElement = scope[attrs["drag"]];
                dragStart(evt, element, scope.dragStyle);
            });
            element.bind('dragend', function (evt) {
                dragEnd(evt, element, scope.dragStyle);
            });
        }
    }
}]);

app.directive("drop", ['$rootScope', function ($rootScope) {

    function dragEnter(evt, element, dropStyle) {
        evt.preventDefault();
        element.addClass(dropStyle);
    };

    function dragLeave(evt, element, dropStyle) {
        element.removeClass(dropStyle);
    };

    function dragOver(evt) {
        evt.preventDefault();
    };

    function drop(evt, element, dropStyle) {
        evt.preventDefault();
        element.removeClass(dropStyle);
    };

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.dropStyle = attrs["dropstyle"];
            element.bind('dragenter', function (evt) {
                dragEnter(evt, element, scope.dropStyle);
            });
            element.bind('dragleave', function (evt) {
                dragLeave(evt, element, scope.dropStyle);
            });
            element.bind('dragover', dragOver);
            element.bind('drop', function (evt) {
                drop(evt, element, scope.dropStyle);
                var dropData = scope[attrs["drop"]];
        ...