1

I am trying to implement Drag and Drop using c0deformer's jQuery UI implementation (see here: http://codef0rmer.github.io/angular-dragdrop/#/) 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). 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. Can this be done? If so, 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. I'm really new to Angular, so any advice is immensely appreciated.

Snippet from c0deformer: 

app.directive('droppable', function($compile) {
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            //This makes an element Droppable
            element.droppable({
                drop:function(event,ui) {
                    var dragIndex = angular.element(ui.draggable).data('index'),
                        dragEl = angular.element(ui.draggable).parent(),
                        dropEl = angular.element(this);

                        console.log(dropEl);

                    if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
                    scope.list2.push(scope.list1[dragIndex]);
                    scope.list1.splice(dragIndex, 1);
                } else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
                    scope.list1.push(scope.list2[dragIndex]);
                    scope.list2.splice(dragIndex, 1);
                }
                scope.$apply();
            }
        });
    }
};
});
Diana E
  • 430
  • 6
  • 21
  • You should put the directive draggable to elements you want to be draggable and the directive droppable on elements you want to be droppable. It doesn't matter what element they are. What is exactly what you want to do? Just drag an element around? – pasine Jul 01 '13 at 09:53
  • @notme - I have multiple draggable elements (they are in a list), which can all be dropped within a single target div (not one div per li). I have not been able to get that to work in the code I pasted. – Diana E Jul 01 '13 at 16:42
  • Could you add more code? Can you create a jsfiddle/plunker with the not working code? – pasine Jul 01 '13 at 18:33

1 Answers1

6

I recently created an angular directive for drag and drop that doesn't rely on jquery-ui. It uses the html5 drag and drop api. It also doesn't have any requirements on the format of the data to be dragged or dropped, it simply sets up a hook for you to be notified when one element is dragged onto another.

Post here: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html

Jason
  • 15,915
  • 3
  • 48
  • 72