We are in the process of developing our initial AngularJS application. One element of the website involves allowing users to drag individuals into specific groups. Similar to Google+ circles, a user can select another user and move them into a circle to include them in that group.
To achieve this functionality, we recognize the need to create a directive. Here is what we have drafted so far:
var DragDrop = angular.module('ajs.Directive.dragDrop', []);
DragDrop.directive('myDrag', function () {
return {
link: function(scope, elt, attrs)
{
// scope.obj.outer = "Updated on link";
elt.draggable({revert:"invalid"});
elt.droppable({
//accept: function( d ) { return true; },
drop: function (event, ui) {
return scope.$apply(function () {
alert("hello")
scope.inner = 'Dropped';
// scope.obj.outer = 'Updated on drop';
});
}
});
}
}
});
Our current setup allows us to drag contacts across the screen. Nonetheless, we are facing challenges when it comes to determining the ID of the dragged element and where it has been dropped.
In addition, following the example mentioned earlier, once an item is dragged, we want it to return to its original position rather than staying in the new location.
We attempted to use revert:"invalid" within the elt.droppable section, but it did not produce the desired outcome.
It is worth noting that we cannot utilize jQuery due to these elements being part of an ng-repeat loop. Consequently, it seems like creating a directive is the most suitable solution for this scenario.