Skip to content

Instantly share code, notes, and snippets.

@Bigous

Bigous/DragDropAngJS.html

Created May 28, 2014 12:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Bigous/ae6ef4e593ad382b8cc1 to your computer and use it in GitHub Desktop.
Save Bigous/ae6ef4e593ad382b8cc1 to your computer and use it in GitHub Desktop.
Download ZIP
From http://www.directiv.es/Angular-DragDrop Drag and Drop com AngularJS
Raw
DragDropAngJS.html
<!DOCTYPE html>
<html ng-app="APP">
<head>
<meta charset="UTF-8">
<title>angular-dragdrop example</title>
<style>
li:hover{background-color: #eee;}
</style>
</head>
<body ng-controller="ExampleController">
<h2>Drag from one group to another</h2>
<table>
<tr>
<td width="250"><b>Group #1</b></td>
<td width="250"><b>Group #2</b></td>
</tr>
<tr>
<td valign="top">
<ul ui-on-Drop="onDrop($event,$data,men)">
<li ui-draggable="true" drag="man"
on-drop-success="dropSuccessHandler($event,$index,men)"
ng-repeat="man in men track by $index">
{{man}}
</li>
</ul>
</td>
<td valign="top">
<ul ui-on-Drop="onDrop($event,$data,women)">
<li ui-draggable="true" drag="woman"
on-drop-success="dropSuccessHandler($event,$index,women)"
ng-repeat="woman in women track by $index">
{{woman}}
</li>
</ul>
</td>
</tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="/application/html/js/ganarajpr/angular-dragdrop/draganddrop.js"></script>
<script>
angular.module("APP",["ngDragDrop"]).
controller("ExampleController",['$scope',function($scope){
$scope.men = ['John','Jack','Mark','Ernie'];
$scope.women = ['Jane','Jill','Betty','Mary'];
$scope.dropSuccessHandler = function($event,index,array){
array.splice(index,1);
};
$scope.onDrop = function($event,$data,array){
array.push($data);
};
}])
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment