angular-drag-and-drop-lists

order list

by Osama Qassar

HTML

<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<link rel="stylesheet" href="//marceljuenemann.github.io/angular-drag-and-drop-lists/demo/framework/demo-framework.css">
<link rel="stylesheet" href="//marceljuenemann.github.io/angular-drag-and-drop-lists/demo/framework/vendor/bootstrap.min.css">
<div ng-app="demo">
  <div ng-controller="DemoController" class="row">
    <div ng-repeat="list in model" class="col-sm-6">
      <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title">List {{$index+1}}</h3></div>
        <div class="panel-body">
          <ul dnd-list dnd-drop="callback({targetList: list, targetIndex: index})">
            <li ng-repeat="item in list"
                dnd-draggable="null" dnd-callback="onDrop(list, $index, targetList, targetIndex)">
              {{item.labelFunc($index)}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

ul[dnd-list] {
  min-height: 42px;
  padding: 0;
}

ul[dnd-list] > li {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 10px 15px;
}

ul[dnd-list] > li.dndDraggingSource {
  display: none;
}

ul[dnd-list] > li.dndPlaceholder {
  background-color: #ddd;
  min-height: 42px;
}

.panel .panel-body {
  padding: 0;
}

JavaScript

angular
  .module('demo', ['dndLists'])
  .controller('DemoController', function($scope) {
    $scope.model = [generateList(1), generateList(2)];

    $scope.onDrop = function(srcList, srcIndex, targetList, targetIndex) {
      // Copy the item from source to target.
      targetList.splice(targetIndex, 0, srcList[srcIndex]);
      // Remove the item from the source, possibly correcting the index first.
      // We must do this immediately, otherwise ng-repeat complains about duplicates.
      if (srcList == targetList && targetIndex <= srcIndex) srcIndex++;
      srcList.splice(srcIndex, 1);
      // By returning true from dnd-drop we signalize we already inserted the item.
      return true;
    };

    function generateList(id) {
      return ['A', 'B', 'C'].map(function(letter) {
        // angular-drag-and-drop-lists usually serializes the objects to drag, thus we
        // can not transfer functions on the objects. However, as this fiddle uses dnd-callback
        // to move the objects directly without serialization, we can use a function reference
        // on the item here.
        return {
          labelFunc: function(index) {
            return "Item " + id + letter + " at index " + index;
          }
        };
      });
    }
  });



/**
 * angular-drag-and-drop-lists v2.1.0
 *
 * Copyright (c) 2014 Marcel Juenemann [email protected]
 * Copyright (c) 2014-2017 Google Inc.
 * https://github.com/marceljuenemann/angular-drag-and-drop-lists
 *
 * License: MIT
 */
!function(e){function n(e,n){return"all"==n?e:e.filter(function(e){return-1!=n.toLowerCase().indexOf(e)})}var a="application/x-dnd",r="application/json",t="Text",d=["move","copy","link"]
e.directive("dndDraggable",["$parse","$timeout",function(e,i){return...