angular drag and drop

by Roger Sanchez

HTML

<div id='container' ng-controller="listController">
    <ul class='list' >
        <reorder list='list'>
            <div >{{element.text}}</div>            
        </reorder>
        
    </ul>
    
</div>

SCSS

.dragging{
    opacity:.4;
}
.dragover{
    border: 2px dashed #000;
    
}
.dragover *{
    //pointer-events: none;
}
li{
    
}

JavaScript

angular.module('demo', []).controller("listController", function ($scope) {
    $scope.list = [];
    var max = 10;
    for(var i = 0; i < max; i++){
        $scope.list.push({id: i, text: "Element " + i});
    }
    

}).directive('draggable', function(){
    return {
        restrict: 'A',
       // scope: {
       //     dragData: '='
       // },
        link: function (scope, element, attributes) {
            var el = element[0];
            el.draggable = true;
            
            el.addEventListener('dragstart', handleDragStart, false);
            el.addEventListener('dragend', handleDragEnd, false);
            function handleDragStart(e){
              this.classList.add('dragging');
              
              e.dataTransfer.effectAllowed = 'move';
              console.log(attributes.dragData);
              e.dataTransfer.setData('data', attributes.dragData);                
                
            }
            
            function handleDragEnd(e) {
              // this/e.target is the source node.
              this.classList.remove('dragging');
            
                           
            }
        }
    }
}).directive('droppable', function(){
    return {
        restrict:"A",
       // scope: {
       //   ondrop: '&',
       //   dropData: '='
       // },
        link: function(scope, element, attributes) {
            var el = element[0];
            //el.draggable = true;
            el.addEventListener('dragenter', handleDragEnter, false);
            el.addEventListener('dragover', handleDragOver, false);
            el.addEventListener('dragleave', handleDragLeave, false);
            el.addEventListener('drop', handleDrop, false);
            
            function handleDragOver(e) {
              if (e.preventDefault) {
                e.preventDefault(); // Necessary. Allows us to drop.
              }
              e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
            
 ...