Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS + jQueryUI Drag & Drop
<!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>
@Steve-Roderick

This comment has been minimized.

Copy link

commented Aug 7, 2013

As gisted above:

  • Load jQuery before Angularjs
@windweller

This comment has been minimized.

Copy link

commented Jul 24, 2014

Emm..it seems like "droppable" is not working.

@PratibhaP

This comment has been minimized.

Copy link

commented Sep 9, 2014

Draggble working cool..
but its not allowing to drop item.. ???

@stevenmwade

This comment has been minimized.

Copy link

commented Oct 8, 2014

Change revert:true to revert:'invalid'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.