Angular directive D&D v2

Faire du Drag&Drop avec angular pour frangular

by manland

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app="app" id="main" ng-controller="ColumnController">
    <div id="infos"></div>
    <div ng-repeat="c in columns" class="column"
      drag="c">
      {{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 { 
    background-color: blue;
}

.columnDrop {
    background-color: green; 
}

JavaScript

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

app.directive("drag", ["$rootScope", function($rootScope) { 
    
    var currentElement, firstOffsetX, firstOffsetY, originalElement;
    var elements = [];    
    angular.element(document.getElementById('main')).bind('mousemove', function(evt) {
        document.getElementById('infos').innerHTML = evt.pageX + " :: " + evt.pageY;
          if(currentElement) {
              var elem = currentElement;
              var position = {x:(evt.pageX - currentElement[0].clientWidth - firstOffsetX), y: (evt.pageY - currentElement[0].clientHeight - firstOffsetY)};
              elem[0].style.position = "absolute";
              elem[0].style.top = position.y+"px";
              elem[0].style.left = position.x+"px";
              //console.log(evt, elem);
              for(var i=0; i<elements.length; i++) {
                  //console.log(elements[i]);
                  var nelem = elements[i][0];
                  if(nelem.offsetTop - nelem.offsetHeight <= position.y && nelem.offsetTop >= position.y && nelem.offsetLeft - nelem.offsetWidth <= position.x && nelem.offsetLeft >= position.x) {
                      console.log("ooook");
                      $rootScope.$broadcast("dropEvent", originalElement.dragData, elements[i].dragData);
                      angular.element(nelem).addClass("columnDrop");
                  } else {
                      angular.element(nelem).removeClass("columnDrop");
                  }
              }
          }
      });
    
angular.element(document.getElementById('main')).bind('mouseup', function(evt) {
    if(currentElement != undefined) {         document.getElementById('main').removeChild(currentElement[0]);
        currentElement = undefined;
        originalElement.removeClass("columnDrag");
        for(var i=0; i<elements.length; i++) {
            elements[i].removeClass("columnDrop");
        }
    }
});
    
  return {
    restrict: 'A',
    link: function(scope, element, attrs)  {
    ...