I am working on a project where I have a board containing different lanes (a kind of grid) on which you can place cards and move them according to their completion status. In order to implement the drag&drop functionality, I am using the angular-dragdrop module.

It is a wrapper for jQueryUI draggable/droppable components which makes it easy to implement drag and drop functionality in AngularJS.

In order to install the module, just run the following in your terminal:

bower install angular-dragdrop

Then in order to load it, you need to reference its JavaScript file, just after the reference to angular.js (and also a reference to jQuery and jQuery UI which are used by this module):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-dragdrop/src/angular-dragdrop.min.js"></script>

And add a dependency in your main module e.g.:

angular.module('myapp', [ 'ngDragDrop' ]);

Now, you’re ready to define draggable elements and droppable areas.

First, let’s make the card elements draggable. My elements looked like this before the change:

<div class="card">
	...
</div>

You need to add three custom attributes to this element:

<div class="card"
	 data-drag="true"
	 data-jqyoui-options="{revert: revertCard,
							helper: 'clone',
							appendTo: 'body',
							zIndex: 350}"
	 jqyoui-draggable="{index: 0,
						placeholder:true,
						animate:true,
						onStart: 'startCallback'}">
	...
</div>

jqyoui-draggable contain options passed to hte angular-dragdrop module. data-jqyoui-options contains the options passed to jQuery UI Draggable.

I’ve just copied the index, placeholder and animate options from some example, so you’ll have to use Google to find more info on them.

revertCard and startCallBack are functions on my controller which are used to control the way the draggable element react.

The zIndex is set so that the element is on top of all other elements while dragged. In my first try, I hadn’t set the appendTo and helper options. Since my draggable elements where contained in a container on which the overflow property was set, I could not move it out of its container. That’s because the element being dragged still had the same parent as the original element.

So you need to attach the element being dragged to the body of the page so that it can be moved anywhere. Unfortunately, attachTo with the “body” value only works if the helper option is set to “clone” i.e. it will not detach the element from its current container and attach it to the body but needs to work with a clone of the element which can be attached to the body.

The drawback is that the original element is still displayed. This is fine if you are writing an editor with some toolbox and want to use drag&drop to create new instances of this element. But if you actually want to move the element, it just doesn’t look good. So you need to additionally hide the original element while its clone is being dragged. That’s what is done in the startCallback of my controller:

$scope.startCallback = function (event, ui) {
	var $draggable = $(event.target);
	ui.helper.width($draggable.width());
	ui.helper.height($draggable.height());
	$draggable.css('opacity', '0');
};

This callback does two things:

1. It makes sure that the clone element doesn’t grow to take up the whole screen (because its size is not limited by its parent anymore).
2. It hides it by setting its opacity to 0.

In one of my early tries, I had hidden the original element by using display:none. The problem is that all other elements in this container would then move because this element was not displayed anymore. But setting its opacity to 0, it works as an empty placeholder.

Later on, once the dragging is stopped, I’ll make it visible again if required (only if it is not dropped at a valid location).

Usually, you will find that most example will set the revert option to “invalid”. This means that if you drop the component outside of a valid drop area, the helper will just come back to the original location and disappear. The problem is that since we’ve hidden the original element, you will end up with no element displayed at all. Thankfully, revert can also take a function as value. This is our second callback:

$scope.revertCard = function (valid) {
	if (!valid) {
		var that = this;
		setTimeout(function () {
			$(that).css('opacity', 'inherit');
		}, 500);
	}
	return !valid;
};

Returning false will cause the helper to return to the original location. The default duration of the animation is 500 milliseconds. Before returning true of false, we check whether the drop location was valid and if yes, we make the original element visible again. If we set the opacity to “inherit” immediately, the original element would be visible while the helper is moving back to the original location. That’s why we make the CSS change with a timeout of 500 milliseconds so that the original element is made visible as soon as the revert animation is finished.

Now we have a working draggable element and just need to define droppable areas where we can drop it:

<div class="lane"
	 data-drop="true"
	 jqyoui-droppable="{multiple: true,
						onDrop: 'dropCallback'}"
	 data-jqyoui-options="{hoverClass: 'ui-state-active',
							tolerance: 'pointer'}">
	...
</div>

The hoverClass is just used so that we can display the droppable area below the mouse pointer differently.

The tolerance option is used so that the element is dropped on the area below the mouse pointer and not on the area below the corner of the dragged element. This is useful when the dragged element is larger than the droppable areas.

We also define an additional callback in the controller:

$scope.dropCallback = function (event, ui) {
	var $lane = $(event.target);
	var $card = ui.draggable;
	if ($card.scope().card.lane != $lane.scope().lane.id) {
		$card.scope().card.lane = $lane.scope().lane.id;
	}
	else {
		$card.css('opacity', 'inherit');
		return false;
	}
};

This callback does two things:

1. It updates the model so that the card is displayed on the lane it was dropped on.
2. It prevents dropping the card on the lane it was on before dragging.

The first part is pretty straightforward. The second one just involves checking the original lane ID and the lane ID on which the drop operation is being performed. If they do not match we allow the drop. Otherwise we return false which is similar to a revert. Unfortunately, returning false doesn’t cause the revert callback to be called. So I have to change the opacity of the original element before returning false.

You’ll also notice that I do not set a timeout of 500 milliseconds. This is because returning false in the drop callback doesn’t cause a revert animation to be executed. I haven’t yet found out how to do this. So the helper just immediately disappears and I have to make the original element visible immediately.

That’s it ! It was actually pretty easy. Since you can set any draggable and droppable options without limitation, having this angular module between you and jQuery UI doesn’t seem to introduce any additional limitation. And since all references to event handler all point to callback in your controller, everything stays clean.

Update: I’ve also come accross an issue with a button on the card. I’m using the angular dialog service to display a dialog when a button on the card is clicked (using ng-click to trigger a function in my controller). At first, nothing happened when clicking on the button. This is because the mouse click didn’t go to the button. The solution was to increase the z-index of the button to 500 i.e. higher than the 350 configured for the draggable card.

Update: I’ve created a Plunker to show a working example.