Drag and Drop directives in Angular Js | sTeam-web-UI | sTeam


The recent developments with the sTeam web interface, involved me writing drag and drop directives for giving scope to drag/move movements in the workarea and the workspace. The concept here is providing user with the feasibility to arrange rooms/documents swiftly and easily.

The idea behind it :
So, in sTeam-web-UI the concept of rooms/documents is implemented using the workareaCtrl. After creating a document/room the created objects appear in the workarea. So in the future, the items in the work area can be sorted and searched for; But adding the scope for drag movements to the web interface makes the the UI/UX to be commendable.

Implementation strategy :
Firstly we need to create directives in angular that can support the actions which when triggered in the front end must result in relative change. So in order to link those actions we must write directives which properly catch the emitted events.

The drag Objective
The way around for implementing the drag objective is to get the element which is selected for the drag option and then emit the event in order to complete the drag action. So we have to go the traditional way for working our way around with this.

// get the element first
angular.element(element).attr("isDraggable": true)
var id = angular.element(element).attr("id")
if(!id) {
id = uuid.create()
angular.element(element).attr("id", id)

Now we emit the events.

// emit events
element.bind("startDrag", function (send) {
data.originalEvent.dataTransfer.setData('text', id);
console.log("Starting to drag")
element.bind("stopDrag", function (send) {
console.log('Stopping to drag')

If we observe the element capturing part, we are just taking the id’s of the elements which are in the DOM and then we bind the respective element with an action, be it startDrag or stopDrag the idea here is to store the id of the element and bind respective action/event to it.

The drop Objective
Before we understand how the drop directive is written there has to be some clarity given on how should we go ahead in writing the directive. The drag and drop directives which when implemented should be carefully monitered since the entire process is interlinked. So the elements must be properly caught and the respective events must be properly binded. While testing we should check if the events are emitting proper actions to the elements or not.

$rootScope.$on("STEAM-DRAG-STRT", function () {
var domelm = document.getElementById(id);
$rootScope.$on("STEAM-DRAG-STOP", function () {
var domelm = document.getElementById(id);

There are alternatives to replicate this mechanism in jQuery and also plain Javascript. But the efficacy of the implementation comes to play only when the DOM can be played with easily.

Thats it folks,
Happy Hacking !!