AngularJS Drag&Drop example

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js" data-semver="1.4.0-beta.6" data-require="angular.js@*"></script>
    <script src="https://raw.githubusercontent.com/codef0rmer/angular-dragdrop/master/src/angular-dragdrop.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller='myController'>
    <div class="lane" 
      ng-repeat="lane in lanes"
      id="{{lane.id}}"
      data-drop="true"
      jqyoui-droppable="{multiple: true, onDrop: 'dropCallback'}"
      data-jqyoui-options="{ hoverClass: 'lane-drop-active', tolerance: 'pointer'}">

      <div class="card" 
        ng-repeat="card in cards | filter: {lane : lane.id }"
        data-drag="true"
        data-jqyoui-options="{ revert: revertCard, helper: 'clone', appendTo: 'body', cursor: 'move', cancel: '.card-description', zIndex: 350 }"
        jqyoui-draggable="{index: 0, placeholder:true, animate:true, onStart: 'startCallback'}">
      </div>
    </div>
  </body>

</html>

// Code goes here

(function(){
  'use strict';
  var app = angular.module('myapp', ['ngDragDrop']);

  app.controller('myController', function($scope, $http){
    
    $scope.cards = [
      {lane:'lane1'},
      {lane:'lane1'},
      {lane:'lane2'},
      {lane:'lane2'},
      {lane:'lane3'},
      {lane:'lane3'}
    ];
    
    $scope.lanes = [
      {id:'lane1'},
      {id:'lane2'},
      {id:'lane3'}
    ];
    
    // drag
    $scope.startCallback = function (event, ui) {
      var $draggable = $(event.target);
      ui.helper.width($draggable.width());
      ui.helper.height($draggable.height());
      $draggable.css('opacity', '0');
    };

    $scope.revertCard = function (valid) {
      if (!valid) {
        var that = this;
        setTimeout(function () {
          $(that).css('opacity', 'inherit');
        }, 500);
      }
      return !valid;
    };

    // drop
    $scope.dropCallback = function (event, ui) {
      var $lane = $(event.target);
      var $card = ui.draggable;
      if ($card.scope().card.lane != $lane.scope().lane.id) {
        $card.scope().card.lane = $lane.scope().lane.id;
      }
      else {
        $card.css('opacity', 'inherit');
        return false;
      }
    };
  });
}());

/* Styles go here */

.lane{
  width:100%;
  height:60px;
  border:1px solid black;
}

.card{
  background:grey;
  width:50px;
  height:50px;
  float:left;
  margin-left:5px;
  margin-top:5px;
}

AngularJS Drag&Drop example

It shows 3 lanes with 6 cards and you can drag and drop cards from one lane to the other one.