codef0rmer/angular-jqueryui-dnd.html

## angular-jqueryui-dnd.html
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
// Bootstrap the Application
var App = angular.module('App', []);

// Set up a controller and define a model, list1 and list2 (empty)
App.controller('dndCtrl', function($scope) {
  $scope.list1 = [
    {name: 'AngularJS', reject: true},
    {name: 'Is'},
    {name: 'teh'},
    {name: '@wesome'}
  ];

  $scope.list2 = [];
});

// This makes any element draggable
// Usage: <div draggable>Foobar</div>
App.directive('draggable', function() {
  return {
    // A = attribute, E = Element, C = Class and M = HTML Comment
    restrict:'A',
    //The link function is responsible for registering DOM listeners as well as updating the DOM.
    link: function(scope, element, attrs) {
      element.draggable({
        revert:true
      });
    }
  };
});

// This makes any element droppable
// Usage: <div droppable></div>
App.directive('droppable', function($compile) {
  return {
    restrict: 'A',
    link: function(scope,element,attrs){
      //This makes an element Droppable
      element.droppable({
        drop:function(event,ui) {
          var dragIndex = angular.element(ui.draggable).data('index'),
              reject = angular.element(ui.draggable).data('reject'),
              dragEl = angular.element(ui.draggable).parent(),
              dropEl = angular.element(this);

          if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
            scope.list2.push(scope.list1[dragIndex]);
            scope.list1.splice(dragIndex, 1);
          } else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
            scope.list1.push(scope.list2[dragIndex]);
            scope.list2.splice(dragIndex, 1);
          }
          scope.$apply();
        }
      });
    }
  };
});
</script>
</head>
<body ng-controller="dndCtrl" ng-cloak>
  <div class='list1' droppable>
    <div class='btn btn-info btn-block' ng-repeat="item in list1" data-index="{{$index}}" data-reject="{{item.reject}}"   draggable>{{item.name}}</div>
  </div>

  <div class='list2' droppable>
    <div class='btn btn-info btn-block' ng-repeat="item in list2" data-index="{{$index}}" data-reject="{{item.reject}}"  draggable>{{item.name}}</div>
  </div>

</body>
</html>
	<!DOCTYPE html>
	<html ng-app="App">
	<head>
	<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<script>
	// Bootstrap the Application
	var App = angular.module('App', []);

	// Set up a controller and define a model, list1 and list2 (empty)
	App.controller('dndCtrl', function($scope) {
	$scope.list1 = [
	{name: 'AngularJS', reject: true},
	{name: 'Is'},
	{name: 'teh'},
	{name: '@wesome'}
	];

	$scope.list2 = [];
	});

	// This makes any element draggable
	// Usage: <div draggable>Foobar</div>
	App.directive('draggable', function() {
	return {
	// A = attribute, E = Element, C = Class and M = HTML Comment
	restrict:'A',
	//The link function is responsible for registering DOM listeners as well as updating the DOM.
	link: function(scope, element, attrs) {
	element.draggable({
	revert:true
	});
	}
	};
	});

	// This makes any element droppable
	// Usage: <div droppable></div>
	App.directive('droppable', function($compile) {
	return {
	restrict: 'A',
	link: function(scope,element,attrs){
	//This makes an element Droppable
	element.droppable({
	drop:function(event,ui) {
	var dragIndex = angular.element(ui.draggable).data('index'),
	reject = angular.element(ui.draggable).data('reject'),
	dragEl = angular.element(ui.draggable).parent(),
	dropEl = angular.element(this);

	if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
	scope.list2.push(scope.list1[dragIndex]);
	scope.list1.splice(dragIndex, 1);
	} else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
	scope.list1.push(scope.list2[dragIndex]);
	scope.list2.splice(dragIndex, 1);
	}
	scope.$apply();
	}
	});
	}
	};
	});
	</script>
	</head>
	<body ng-controller="dndCtrl" ng-cloak>
	<div class='list1' droppable>
	<div class='btn btn-info btn-block' ng-repeat="item in list1" data-index="{{$index}}" data-reject="{{item.reject}}" draggable>{{item.name}}</div>
	</div>

	<div class='list2' droppable>
	<div class='btn btn-info btn-block' ng-repeat="item in list2" data-index="{{$index}}" data-reject="{{item.reject}}" draggable>{{item.name}}</div>
	</div>

	</body>
	</html>