Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
AngularJS + jQueryUI Drag & Drop
<!DOCTYPE html>
<html ng-app="App">
<meta name="description" content="AngularJS + jQuery UI Drag-n-Drop" />
<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet" type="text/css" />
<link href="" rel="stylesheet">
<script src=""></script>
<meta charset=utf-8 />
<title>JS Bin</title>
// 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
//The link function is responsible for registering DOM listeners as well as updating the DOM.
link: function(scope, element, attrs) {
// 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
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.list1.splice(dragIndex, 1);
} else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
scope.list2.splice(dragIndex, 1);
<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>{{}}</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>{{}}</div>
Copy link

Steve-Roderick commented Aug 7, 2013

As gisted above:

  • Load jQuery before Angularjs

Copy link

windweller commented Jul 24, 2014 seems like "droppable" is not working.

Copy link

PratibhaP commented Sep 9, 2014

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

Copy link

suederade 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