kosich/app.js

## app.js
'use strict';

var DATA_TYPE_ATTR = 'text/html';

// a hack to include `dataTransfer` to $ events
jQuery.event.props.push('dataTransfer');

angular.module( 'app', [] )

.controller ( 'main', function( $scope, dndBuffer ){

    // indicate what we got in the drag buffer
    $scope.$watch( dndBuffer.get, function( data ){
        $scope.data = data;
    } );

} )
.controller ( 'dropZone1', function(){
    this.items = [ 2, 3 ];

    this.addItem = function addItem ( item ){
        this.items.push( item );
    };

} )
.controller ( 'dropZone2', function(){
    this.items = [ 1, 5, 4 ];

    this.addItem = function addItem ( item ){
        this.items.push( item );
    };

} )

.service ( 'dndBuffer', function(){

    var data;

    return {
        set : function add( _data ){
            data = _data;
        },
        get : function get(  ){
            return data;
        },
        remove : function clear(  ){
            data = undefined;
        }
    };

} )

.directive( 'dndDrag', function( dndBuffer ){
    return {
        restrict : 'A',
        scope : {
            itemData: '='
        },
        link: function( scope, element, attributes ){

            var $el = $( element );

            $el.prop('draggable', true);

            console.log( 'initing draggable item' );

            $el.on( 'dragstart', function(e){
                scope.$apply( function( ){
                    dndBuffer.set( scope.itemData );
                });
                console.group('DND');
                console.log( 'going to drag', scope.itemData );
            } );

            $el.on( 'dragend', function(e){
                scope.$apply( function( ){
                    dndBuffer.remove();
                });
                console.log( 'ended draggin', scope.itemData );
                console.groupEnd('DND');
            } );

            // TODO: clean data on destroy
        }

    };
})
.directive( 'dndDrop', function ( dndBuffer ){

    return {
        restrict: 'A',
        scope : {
            itemData: '=',
            onDrop: '&'
        },
        link: function( scope, element ){
            var $el = $( element );

            $el.on('drop', function(e) {
                console.log('dropped', dndBuffer.get());
                scope.$apply( function( s ){
                    s.onDrop( {
                        data : dndBuffer.get()
                    } );
                });
                this.classList.remove('text-primary');
            });

            $el.on('dragenter', function(e) {
                this.classList.add('text-primary');
                // console.log('in');
            });

            $el.on('dragleave', function(e) {
                this.classList.remove('text-primary');
                // console.log('left');
            });

            // Event to drag over action on droppable element
            $el.on('dragover', function(e) {
                e.preventDefault();
                // console.log('over');
            });
        }
    }

});

## index.html
<!DOCTYPE html>
<html>
    <head>
        <link href='../node_modules/bootstrap/dist/css/bootstrap.css' rel='stylesheet' />
    </head>
    <body ng-app='app'>
        <div class='container' ng-controller='main'>
            <h1>Buffer contains: {{data}}</h1>

            <div class='row'>
                <div ng-controller='dropZone1 as dz1' class='col-xs-6'>
                    <h3>Zone with its drop handler</h3>
                    <ul dnd-drop on-drop='dz1.addItem( data )'>
                        <li ng-repeat='item in dz1.items track by $index'>
                            <span dnd-drag item-data='item'>&nbsp;{{ item }}&nbsp;</span>
                        </li>
                    </ul>
                </div>

                <div ng-controller='dropZone2 as dz2' class='col-xs-6'>
                    <h3>And the second one</h3>
                    <div class='well' dnd-drop on-drop='dz2.addItem( data )'>
                        <span ng-repeat='item in dz2.items track by $index'>
                            <span dnd-drag item-data='item'>&nbsp;{{ item }}&nbsp;</span>
                        </span>
                    </div>
                </div>

            </div>
        </div>

        <script src='../node_modules/jquery/dist/jquery.js'></script>
        <script src='../node_modules/angular/angular.js'></script>

        <script src='app.js'></script>
    </body>
</html>
	'use strict';

	var DATA_TYPE_ATTR = 'text/html';

	// a hack to include `dataTransfer` to $ events
	jQuery.event.props.push('dataTransfer');

	angular.module( 'app', [] )

	.controller ( 'main', function( $scope, dndBuffer ){

	// indicate what we got in the drag buffer
	$scope.$watch( dndBuffer.get, function( data ){
	$scope.data = data;
	} );

	} )
	.controller ( 'dropZone1', function(){
	this.items = [ 2, 3 ];

	this.addItem = function addItem ( item ){
	this.items.push( item );
	};

	} )
	.controller ( 'dropZone2', function(){
	this.items = [ 1, 5, 4 ];

	this.addItem = function addItem ( item ){
	this.items.push( item );
	};

	} )

	.service ( 'dndBuffer', function(){

	var data;

	return {
	set : function add( _data ){
	data = _data;
	},
	get : function get( ){
	return data;
	},
	remove : function clear( ){
	data = undefined;
	}
	};

	} )

	.directive( 'dndDrag', function( dndBuffer ){
	return {
	restrict : 'A',
	scope : {
	itemData: '='
	},
	link: function( scope, element, attributes ){

	var $el = $( element );

	$el.prop('draggable', true);

	console.log( 'initing draggable item' );

	$el.on( 'dragstart', function(e){
	scope.$apply( function( ){
	dndBuffer.set( scope.itemData );
	});
	console.group('DND');
	console.log( 'going to drag', scope.itemData );
	} );

	$el.on( 'dragend', function(e){
	scope.$apply( function( ){
	dndBuffer.remove();
	});
	console.log( 'ended draggin', scope.itemData );
	console.groupEnd('DND');
	} );

	// TODO: clean data on destroy
	}

	};
	})
	.directive( 'dndDrop', function ( dndBuffer ){

	return {
	restrict: 'A',
	scope : {
	itemData: '=',
	onDrop: '&'
	},
	link: function( scope, element ){
	var $el = $( element );

	$el.on('drop', function(e) {
	console.log('dropped', dndBuffer.get());
	scope.$apply( function( s ){
	s.onDrop( {
	data : dndBuffer.get()
	} );
	});
	this.classList.remove('text-primary');
	});

	$el.on('dragenter', function(e) {
	this.classList.add('text-primary');
	// console.log('in');
	});

	$el.on('dragleave', function(e) {
	this.classList.remove('text-primary');
	// console.log('left');
	});

	// Event to drag over action on droppable element
	$el.on('dragover', function(e) {
	e.preventDefault();
	// console.log('over');
	});
	}
	}

	});
	<!DOCTYPE html>
	<html>
	<head>
	<link href='../node_modules/bootstrap/dist/css/bootstrap.css' rel='stylesheet' />
	</head>
	<body ng-app='app'>
	<div class='container' ng-controller='main'>
	<h1>Buffer contains: {{data}}</h1>

	<div class='row'>
	<div ng-controller='dropZone1 as dz1' class='col-xs-6'>
	<h3>Zone with its drop handler</h3>
	<ul dnd-drop on-drop='dz1.addItem( data )'>
	<li ng-repeat='item in dz1.items track by $index'>
	<span dnd-drag item-data='item'> {{ item }} </span>
	</li>
	</ul>
	</div>

	<div ng-controller='dropZone2 as dz2' class='col-xs-6'>
	<h3>And the second one</h3>
	<div class='well' dnd-drop on-drop='dz2.addItem( data )'>
	<span ng-repeat='item in dz2.items track by $index'>
	<span dnd-drag item-data='item'> {{ item }} </span>
	</span>
	</div>
	</div>

	</div>
	</div>

	<script src='../node_modules/jquery/dist/jquery.js'></script>
	<script src='../node_modules/angular/angular.js'></script>

	<script src='app.js'></script>
	</body>
	</html>