I am trying to implement Drag and Drop using the jQuery c0deformer user interface implementation (see here: http://codef0rmer.imtqy.com/angular-dragdrop/#/ ). The drag and drop function works fine, but it seems I can’t get the functionality that I get in terms of drop. In this application, I want to be able to discard draggable elements anywhere in the target div, i.e. I do not want the destination to be limited to a list type structure (or a set of repeating divs). This is mainly because the user will drag and drop items on the fly, and there will be no way to know how many items the user will drag in advance.
I looked at a website and cannot find an example in Angular that uses drag and drop without effectively dragging from one list to another list. It can be done? If so, I'm not sure how I will update the area accordingly after the item has been dragged. In this example, the following items are inserted into the area of the second list and the new area is applied. In the ideal case, the volume of items dropped is the target div, which I mentioned above. I am really new to Angular, so any advice is greatly 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(); } }); } }; });
angularjs jquery-ui drag-and-drop
Diana e
source share