Skip to content

Instantly share code, notes, and snippets.

Last active February 22, 2018 10:23
Show Gist options
  • Save codef0rmer/3975207 to your computer and use it in GitHub Desktop.
Save codef0rmer/3975207 to your computer and use it in GitHub Desktop.
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

As gisted above:

  • Load jQuery before Angularjs

Copy link seems like "droppable" is not working.

Copy link

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

Copy link

Change revert:true to revert:'invalid'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment