CodePen Embed - UserManagement DragDrop

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://rawgit.com/bevacqua/angular-dragula/master/dist/dragula.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>

<div ng-app="DragAndDrop" class="body-container" layout="column">
  <div layout="row" layout-align="space-around start" layout-margin ng-controller="mainCtrl" flex>
    <div flex>
      <md-toolbar class="md-display-1">
        <div class="md-toolbar-tools">
          <div>Active Users</div>
          <span flex></span>
        </div>
      </md-toolbar>
      <md-whiteframe class="md-whiteframe-2dp" layout="column" layout-padding layout-align="space-around stretch" flex>

        <div>
          <div layout="row" layout-padding style="background-color: rgba(0,0,0,.1);">
            <div flex class="data-cell">User Name</div>
            <div flex class="data-cell">Privilege A</div>
            <div flex class="data-cell">Privilege B</div>
            <div flex class="data-cell">Privilege C</div>
          </div>
          <md-content class="user-drop-container" dragula-model="users" dragula="'bag-users'" layout-align="space-around stretch" class="questions-container" style="max-height: 80vh;border-color: rgba(0,0,0,.1);border-width:1px;border-style:solid;">
            <div layout="row" class="grab-item data-row" ng-repeat="user in users" layout-align="start center">
              <div class="data-cell" flex>{{user.name}}</div>
              <md-checkbox layout class="data-cell" flex ng-model="user.privA"><label>Privilege A</label></md-checkbox>
              <md-checkbox layout class="data-cell" flex ng-model="user.privB">Privilege B</md-checkbox>
              <md-checkbox layout class="data-cell" flex ng-model="user.privC">Privilege C</md-checkbox>
            </div>
          </md-content>
        </div>
      </md-whiteframe>
    </div>

    <md-whiteframe class="md-whiteframe-2dp" layout="column" layout-align="space-around stretch" flex="30">
      <md-toolbar class="md-display-1">
        <div class="md-toolbar-tools">
          <div>Inactive Users</div>
          <span flex></span>
        </div>
      </md-toolbar>
      <div class="question-search" layout="row" style="padding-top:0.5em">
        <md-input-container flex style="margin-bottom: 0;">
          <label style="margin-left: 0.5em;">Filter</label>
          <input ng-model="searchText" ng-init="searchText = ''">
        </md-input-container>
      </div>
      <md-content layout-padding layout-align="space-around stretch" class="questions-container" style="max-height: 80vh;">
        <md-list class="user-drop-container" dragula-model="autoCompleteUsers" dragula="'bag-users'">
          <md-list-item ng-click=";" ng-show="user.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1"  class="grab-item" ng-repeat="user in autoCompleteUsers">
            {{user.name}}
          </md-list-item>
        </md-list>
      </md-content>
    </md-whiteframe>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
    <script src="https://rawgit.com/bevacqua/angular-dragula/master/dist/angular-dragula.min.js"></script>
    <script src="https://cdn.rawgit.com/bevacqua/angularjs-dragula/daa3ef94/dist/angularjs-dragula.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
</div>

body {
  background-color: white;
}
.body-container {
  margin: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  min-width: 70%;
  max-width: 80%;
}
.edit-question-modal {
  min-width: 80%;
  overflow-x:hidden;
  min-height:70vh;
}
@media screen and (max-width: 1600px) {
    .edit-question-modal {
      min-width: 95%;
    }
  .body-container {
         max-width: 100%;
    }
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .body-container {
         max-width: 100%;
    }
}
md-list-item.grab-item.ng-hide-remove {
  animation: 300ms fadeInRight;
}
md-list-item.grab-item.ng-hide-add {
  animation: 300ms fadeOutRight;
}
.ng-hide-remove {
  animation: 300ms fadeInDown;
}
.ng-hide-add {
  animation: 300ms fadeOutLeft;
}
.data-cell {
  padding: .5em;
  margin-top: .5em;
  margin-bottom: .5em;
}
md-checkbox.data-cell {
  margin: 0;
}
md-content.questions-container {
  overflow-x: hidden;
}
div.grab-item {
  border-color: rgba(0,0,0,.1);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.grab-item {
  cursor: grab;
  cursor: -webkit-grab;
}
.question-item {
  padding: 0.5em;
  margin: 0.5em;
  cursor: grab;
  cursor: -webkit-grab;
}
.question-container.question-drag {
  background-color: white;
}
.icon-button.md-button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  align-self: center;
  width: 4em;
  height: 4em;
  line-height: 1em;
}
.icon-button.md-button.small {
  width: 2em;
  height: 2em;
}
.survey-question {
  padding: .5em;
}
.survey-follow-up-container {
  padding: 0.5em;
  border:  #496f6e;
  border-width: 2px;
  border-style: dashed;
}
md-input-container.survey-name-input {
  margin-bottom: 0;
  height: 2em;
}
.section-body {
  border-width: 2px;
  border-color:  #496f6e;
  border-style: dashed;
  min-height: 2em;
}
div.section-container.ng-enter {
  animation: 300ms zoomIn;
}
div.section-container.ng-leave {
  animation: 300ms zoomOut;
}
[survey-question].ng-enter {
  animation: 300ms zoomIn;
}
[survey-question].ng-leave {
  animation: 300ms zoomOut;
}

angular.module('DragAndDrop', ['ngMaterial', angularDragula(angular)])
  .config(function($mdThemingProvider) {
     $mdThemingProvider.theme('default').primaryPalette('teal');
  })
  .controller('mainCtrl', function($scope) {
     $scope.autoCompleteUsers = [
      {name:'Maggin Albert'},
{name:'Maggin Louisa'},
{name:'Maggin Anna'},
{name:'Mallet August'},
{name:'Mallet Mamie'},
{name:'Mallet Louis'},
{name:'Manchin Ed'},
{name:'Martin Susan'},
{name:'Martin William'},
{name:'Martin Emma'},
{name:'Martin William'},
{name:'Martin Henry'},
{name:'Matthews Martha'},
{name:'Matthews Henry'},
{name:'Matthews Mary'},
{name:'Matthews Joseph'},
{name:'Matthews Fanny'},
{name:'Matthews John'},
{name:'McClusky Robert'},
{name:'McCoslin Jas'},
{name:'McCoslin Sarah'},
{name:'McCoslin James'},
{name:'McCoslin Henry'},
{name:'McCoslin Lilly'},
{name:'McCoslin Sarah'},
{name:'McCoslin Sarah'},
{name:'McCrager Dunklin'},
{name:'McDonald Sandy'},
{name:'McDurman Pat'},
{name:'McDusmann Jas'},
{name:'McDusmann Ellen'},
{name:'McDusmann John'},
{name:'McGorman Thos'},
{name:'McGorman Catherine'},
{name:'McGorman Mary'},
{name:'McGorman James'},
{name:'McGorman Chas'},
{name:'McGraw Hugh'},
{name:'McGraw Margaret'},
{name:'McGraw Margaret'},
{name:'McGuin James'},
{name:'McGuin Mary'},
{name:'McGwin Mary'},
{name:'McMenamen Ellen'},
{name:'McMinus Hannah'},
{name:'McMinus John'},
{name:'Menard August'},
{name:'Menard Gustave'},
{name:'Mereablin Eugena'},
{name:'Mesnier Charles'},
{name:'Mesnier Margaret'},
{name:'Mesnier Caroline'},
{name:'Mesnier Cecila'},
{name:'Meuder Robert'},
{name:'Meuder Charlotte'},
{name:'Meuder Sarah'},
{name:'Meuder Robert'},
{name:'Mien Madam'},
{name:'Mien John'},
{name:'Miles Nephi'},
{name:'Miles Randal'},
{name:'Miles Ann'},
{name:'Miles Richard'},
{name:'Mires Antony'},
{name:'Molitor Mary'},
{name:'Molitor B'},
{name:'Molitor Mary'},
{name:'Molitor John'},
{name:'Monnier Louisa'},
{name:'Monnier Julia'},
{name:'Monnier Mary'},
{name:'Monnier Adele'},
{name:'Monnier Rose'},
{name:'Monrine Edward'},
{name:'Moody Augustus'},
{name:'Moody Anna'},
{name:'Moody Caroline'},
{name:'Moody Allen'},
{name:'Moody Martha'},
{name:'Moody Charles'},
{name:'Moore Chas'},
{name:'Moran Aba'},
{name:'Moran John'},
{name:'Moran Pat'},
{name:'Mordacier Benjamin'},
{name:'Morisson Louis'},
{name:'Morrison Angelique'},
{name:'Morrison Volmer'},
{name:'Muggle Fred'},
{name:'Murdoch Maria'},
{name:'Murdoch J'},
{name:'Murdoch William'},
{name:'Murdoch Julia'},
{name:'Murdoch Elizabeth'},
{name:'Murdoch Louisa'},
{name:'Murdoch John'},
{name:'Murdock Jane'},
{name:'Murdock Robert'},
{name:'Murdock John'},
{name:'Murphy Mary'},
{name:'Murphy Martin'},
{name:'Murphy Catherine'},
{name:'Murphy Michael'},
{name:'Murphy Bridget'},
{name:'Murphy John'},
{name:'Murphy Thomas'},
{name:'Mutthaup Ernest'},
{name:'Mutthaup Flora'},
{name:'Myers Louis'},
{name:'Myers Elizabella'},
{name:'Nagle Issac'},
{name:'Nixon Sarah'},
{name:'Nixon Robert'},
{name:'Nixon John'},
{name:'Nixon Margaret'},
{name:'Orton Lucy'},
{name:'Orton John'},
{name:'Owens William'},
{name:'Owens Lucy'},
{name:'Owens Mary'},
{name:'Owens Edward'},
{name:'Owens Anna'},
{name:'Palmer Thomas'},
{name:'Paste Antone'},
{name:'Pecie Julia'},
{name:'Perque Lydia'},
{name:'Perque Charles'},
{name:'Perque Ann'},
{name:'Perque Sophia'},
{name:'Perque Charles'},
{name:'Perque Sarah'},
{name:'Perque Marion'},
{name:'Perrin Henry'},
{name:'Pery David'},
{name:'Picot Victor'},
{name:'Pike Fanney'},
{name:'Pike John'},
{name:'Pike Edward'},
{name:'Pike Harriet'},
{name:'Pike Edward'},
{name:'Pike Sherman'},
{name:'Pike Albert'},
{name:'Pitcher Alexander'},
{name:'Pitcher Jane'},
{name:'Pitcher Louis'},
{name:'Pitcher Emma'},
{name:'Plant W'},
{name:'Plant Frances'},
{name:'Plant William'},
{name:'Plant Fanny'},
{name:'Plant Mary'},
{name:'Plant Alfred'},
{name:'Podgue David'},
{name:'Podgue Mary'},
{name:'Podgue Elizabeth'},
{name:'Potof William'},
{name:'Povoin Peter'},
{name:'Power John'},
{name:'Power Michel'},
{name:'Power Sarah'},
{name:'Power Bridget'},
{name:'Power Julia'},
{name:'Power Jacob'},
{name:'Powl Daniel'},
{name:'Price Henry'},
{name:'Price Elizabeth'},
{name:'Price Henry'},
{name:'Price Mary'},
{name:'Price Mary'},
{name:'Price Henry'},
{name:'Price David'},
{name:'Price Christiana'},
{name:'Price Elizabeth'},
{name:'Price Joseph'},
{name:'Price Emma'},
{name:'Price Charles'},
{name:'Price Geo'},
{name:'Price Catherine'},
{name:'Price George'},
{name:'Price John'},
{name:'Price Catherine'},
{name:'Price Jacob'},
{name:'Price William'},
{name:'Price Otto'},
{name:'Price Mary'},
{name:'Prior Nancy'},
{name:'Pull John'},
{name:'Pull Anna'},
{name:'Pull Elizabeth'},
{name:'Pumfey Henry'},
{name:'Pumfey Carlina'},
{name:'Pumfey Henry'},
{name:'Quedems Charles'},
{name:'Quigly John'},
{name:'Quigly Mary'},
{name:'Quigly Mary'},
{name:'Quigly John'},
{name:'Quigly Margaret'},
{name:'Quillerman Elemate'},
{name:'Ragnard Louis'},
{name:'Ragnard Charles'},
{name:'Ramband Louis'},
{name:'Ramband Mary'},
{name:'Ramband Bertha'},
{name:'Ramband Mary'},
{name:'Ramband Corilla'},
{name:'Rauck Geo'},
{name:'Raymand Maria'},
{name:'Reese John'},
{name:'Refinach Henry'},
{name:'Refinach Margaret'},
{name:'Revoire Francois'},
{name:'Reynolds Joseph'},
{name:'Rhyne Bridget'},
{name:'Richards Lucilla'}
    ];
    $scope.users = [{name: 'Nurgal'},{name: 'Json Born'},{name: 'Alice Wondering'}];
  });

This Pen is owned by David on CodePen.

See more by @gerrells-david on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.