Skip to content

Instantly share code, notes, and snippets.

@kosich

kosich/app.js

Created March 14, 2015 18:53
Show Gist options
  • Save kosich/1ea05b8d0db2bb58874e to your computer and use it in GitHub Desktop.
Save kosich/1ea05b8d0db2bb58874e to your computer and use it in GitHub Desktop.
Download ZIP
ng html5 dnd example
Raw
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');
});
}
}
});
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment