Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Drag and drop - AngularJS

I am trying to implement drag and drop functionality in a web application built on AngularJS.

The draggable items are generated from a data model and are presented as an unordered list of images in a div (menu div on left-hand side). I have scoured the web for D&D examples, but all of the code snippets I have seen show items dragged from one list to another.

I simply want to be able to drag the images from the left-hand side menu list and drop ANYWHERE within a center div, i.e., not anchored within another list item structure.

User Gravatar


Posted Jul 1 2013 1:52 UTC


  • angular.js

4 Replies

Hello deastman,

You should use this directive: here (it requires jQuery & jQuery UI) If you have any problems with it, please post your code, or if it is private, contact us for further help.


Nikola Boychev

User Gravatar


Posted Jul 1 2013 13:22 UTC

Hi Nikola.

Thanks for your response.

I should have been more descriptive in the paragraph above. I am actually trying to implement Drag and Drop using c0deformer's jQuery UI implementation (same link that you mentioned, here) The dragging part works fine, but I can't seem to get the functionality I am after in terms of the drop. In this application, I want to be able to drop the draggable items anywhere within a target div, i.e., I don't want the destination scope to be limited to a list-type structure (or a set of repeated divs). All of the items to be dragged must be dropped within the same, one div. Mainly this is because the user will be dragging items on the fly and there will be no way of knowing how many items the user will drag and drop in advance.

I have scoured the web and cannot find an example in Angular that uses drag and drop without effectively dragging from one list to another list. I am not sure how I would appropriately update the scope after an item has been dragged. In this example code below, the dropped items are pushed into the scope of a second list and the new scope is applied. Ideally, the scope of the dropped items is the target div I mentioned above.

Snippet from c0deformer-

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\'),
                        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);
User Gravatar


Posted Jul 1 2013 21:17 UTC

Hi deastman,

If I understand correctly, you have many source lists and one drop list. The sources are different (for example - in one list you have pictures, in other - phone entries etc.). Because the drag and drop feature, moves the entry in the JS array/object, not the html element (this is where angular does it\'s magic), the only way that you can drop different elements in one div, is to use an if statement from angularui. I\'m not 100% sure that it will works, so if you provide some code, it will be great.

Regards, Nikola Boychev

User Gravatar


Posted Jul 1 2013 23:30 UTC

{{list1.title}} {{list2.title}}

App.controller('OverviewCtrl', function($scope) { $scope.list1 = {title: 'AngularJS - Drag Me'}; $scope.list2 = {}; });

User Gravatar


Posted Feb 19 2014 21:36 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions