Custom directive to Drag and Drop in AngularJS app

Question

I have written an application in AngularJS and one of the requirements I am working on is to drag elements from left and drop that element to right container. All the elements from left does get dropped over to right container one by done fine. But when I click on x icon to move them back to left container, I can only move items that are in blue and item ("Manual Intervention") in green color, I cannot move back to left container. I have attached ng-click to a link to trigger a function to detach all items that are cloned and move items that are not cloned. I think this part $rootScope.removeDraggedItem of the code in my js doesnt bind correctly when it is moved from left to right for "Manual Intervention" element and its unable to execute the function.

Here is the link to my JSFiddle.

Here is my code:

HTML


  Components configuration:
  
    
      
        
          
            
              
                
                  {{component.name}} 
                                                
                                            
                
                
                  Manual Intervention

JS code:

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $rootScope) {
  $scope.title = "Test";
  $rootScope.removeDraggedItem = function($event) {
    var element = $(event.target).closest("li");
    console.log(element.attr("drag-option"));
    if (element.attr("drag-option") === "clone") {
      element.detach();
    } else {
      // Move to its original place
      console.log("No clone detected! Moving element to its original place...");
      var attrVal = element.attr("drag-option");
      $(element).find("i").addClass("hidden");
      $(element).detach().appendTo("#" + attrVal);
    }
  };
  $scope.components = [{
    "name": "Component App1"
  }, {
    "name": "Component App2"
  }, {
    "name": "Component App3"
  }, {
    "name": "Component SQL1"
  }, {
    "name": "Component SQL2"
  }];
});
app.directive('dragNDrop', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          revert: function(event, ui) {
            // on older version of jQuery use "draggable"
            // $(this).data("draggable")
            // on 2.x versions of jQuery use "ui-draggable"
            // $(this).data("ui-draggable")
            $(this).data("uiDraggable").originalPosition = {
              top: 0,
              left: 0
            };
            // return boolean
            return !event;
            // that evaluate like this:
            // return event !== false ? false : true;
          }
        });
        $('#dropright').droppable({
          drop: function(event, ui) {
            $(this).find("li").find("i").removeClass("hidden");
          }
        });
      }
    }
  })
  .directive('detachElement', function() {
    return {
      restrict: 'AC',
      link: function($scope, element, attrs) {
        element.find("a").bind('click', function() {
          console.log("working now???");
        });
      }
    }
  })
  .directive('dragNDropClone', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.draggable({
          connectToSortable: "#dropright",
          helper: 'clone',
          invert: false
        });
      }
    }
  })
  .directive('sortable', function() {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        element.sortable({
          cursor: 'move',
          revert: true
        });
      }
    }
  });

CSS:

ul,
li {
  list-style-type: none;
}
/*
    Release Dashboard
*/
.dashboard-header {
    margin-top: 31px;
}

.release-action-btn {
    border-color: #fff;
}

.status-color-red {
    background-color: #d9534f;
    color: white;
}
.status-color-success {
    background-color: #5cb85c;
    color: white;
}
.status-color-new {
    background-color: #999999;
    color: white;
}
.status-color-inprogress {
    background-color: #337ab7;
    color: white;
}

.panel-default > .panel-heading, .table-header, .navbar-inverse {
    background-color: #164c9c !important;
    color: white;
}

UPDATE:

Fixed the issue by adding on click event to droppable. See below code.

$('#dropright').droppable({
                        drop: function (event, ui) {
                            $(this).find("li").find("i").removeClass("hidden");
                            if ($(this).find("li").attr("drag-option") === "clone")
                            {
                                console.log($(this).find("li").find("a"));
                                $(this).find("li").find("a").on('click', function (evt) {
                                    evt.preventDefault();
                                    $(this).closest("li").remove();
                                })
                            }
                        }
                    });

Custom directive to Drag and Drop in AngularJS app

Answers (1)

Related Questions