How to implement drag and drop functionality in AngularJS



Image not found!!

Implementing drag and drop functionality in AngularJS involves a combination of HTML, CSS, and AngularJS directives. Here's a basic example to get you started:

  1. HTML Structure: Define a list of items that can be dragged and dropped.
html
<div ng-app="myApp" ng-controller="myController">
  <ul>
    <li ng-repeat="item in items" draggable="true" ondragstart="dragStart(event)">{{item.name}}</li>
  </ul>
  <div droppable="true" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>
</div>
  1. AngularJS Controller: Define the controller and the necessary functions for drag and drop.
javascript
angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.items = [
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' }
    ];

    $scope.dragStart = function(event) {
      event.dataTransfer.setData("text", event.target.innerText);
    };
  })
  .directive('droppable', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.on('dragover', function(event) {
          event.preventDefault();
        });
        element.on('drop', function(event) {
          event.preventDefault();
          var data = event.dataTransfer.getData("text");
          element.append(data);
        });
      }
    };
  });

In this example:

  • The ng-repeat directive is used to iterate over an array of items and display them as draggable elements.
  • The draggable="true" attribute is added to each draggable item to make them draggable.
  • The ondragstart event handler is used to set the data that will be transferred during the drag operation.
  • The droppable directive is created to handle the drop zone behavior.
  • The dragover event handler is used to prevent the default behavior of the drop event.
  • The drop event handler is used to handle the drop event and append the dropped data to the drop zone.

This is a basic example to demonstrate the concept of drag and drop in AngularJS. Depending on your requirements, you may need to add additional features and functionality. Additionally, please note that AngularJS is an older framework, and you might want to consider using Angular (version 2 and above) or another modern framework for new projects.

Category List