A Pen by Alex.

index.html

<div ng-app="sortableApp" ng-controller="sortableController" class="container">
  <h2>ui.sortable connected lists event order</h2>

  <div class="floatleft">
    <div ui-sortable="sortableOptionsList[0]" class="apps-container screen floatleft" ng-model="rawScreens[0]">
      <div class="app" ng-repeat="app in rawScreens[0]">{{$index}} {{app.title}}</div>
    </div>
    <div ui-sortable="sortableOptionsList[1]" class="apps-container screen floatleft" ng-model="rawScreens[1]">
      <div class="app" ng-repeat="app in rawScreens[1]">{{$index}} {{app.title}}</div>
    </div>
    <div style="clear: both;"></div>
</div>

  <div class="floatright">
    <button type="button" ng-click="logModels()">Log Models</button>
    <ul class="list logList">
      <li ng-repeat="entry in sortingLog" class="logItem">
        {{entry}}
      </li>
    </ul>
  </div>
  
  <div class="clear"></div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
  <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
</div>

script.js

var myapp = angular.module('sortableApp', ['ui.sortable']);


myapp.controller('sortableController', function ($scope) {
  var tmpList = [];
  
  $scope.rawScreens = [
    [{
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (a)',
      link: 'http://www.facebook.com'
    }, {
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (a)',
      link: 'http://www.youtube.com'
    }, {
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (a)',
      link: 'http://www.gmail.com'
    }, {
      icon: './img/icons/google+.jpg',
      title: 'Google+ (a)',
      link: 'http://plus.google.com'
    }, {
      icon: './img/icons/twitter.jpg',
      title: 'Twitter (a)',
      link: 'http://www.twitter.com'
    }, {
      icon: './img/icons/yahoomail.jpg',
      title: 'Yahoo Mail (a)',
      link: 'http://mail.yahoo.com'
    }, {
      icon: './img/icons/pinterest.jpg',
      title: 'Pinterest (a)',
      link: 'http://www.pinterest.com'
    }],
    [{
      icon: './img/icons/facebook.jpg',
      title: 'Facebook (b)',
      link: 'http://www.facebook.com'
    }, {
      icon: './img/icons/youtube.jpg',
      title: 'Youtube (b)',
      link: 'http://www.youtube.com'
    }, {
      icon: './img/icons/gmail.jpg',
      title: 'Gmail (b)',
      link: 'http://www.gmail.com'
    }, {
      icon: './img/icons/google+.jpg',
      title: 'Google+ (b)',
      link: 'http://plus.google.com'
    }, {
      icon: './img/icons/twitter.jpg',
      title: 'Twitter (b)',
      link: 'http://www.twitter.com'
    }, {
      icon: './img/icons/yahoomail.jpg',
      title: 'Yahoo Mail (b)',
      link: 'http://mail.yahoo.com'
    }, {
      icon: './img/icons/pinterest.jpg',
      title: 'Pinterest (b)',
      link: 'http://www.pinterest.com'
    }]
  ];
  
  
  $scope.sortingLog = [];
  
  function createOptions (listName) {
    var _listName = listName;
    var options = {
      placeholder: "app",
      connectWith: ".apps-container",
      activate: function() {
          console.log("list " + _listName + ": activate");
      },
      beforeStop: function() {
          console.log("list " + _listName + ": beforeStop");
      },
      change: function() {
          console.log("list " + _listName + ": change");
      },
      create: function() {
          console.log("list " + _listName + ": create");
      },
      deactivate: function() {
          console.log("list " + _listName + ": deactivate");
      },
      out: function() {
          console.log("list " + _listName + ": out");
      },
      over: function() {
          console.log("list " + _listName + ": over");
      },
      receive: function() {
          console.log("list " + _listName + ": receive");
      },
      remove: function() {
          console.log("list " + _listName + ": remove");
      },
      sort: function() {
          console.log("list " + _listName + ": sort");
      },
      start: function() {
          console.log("list " + _listName + ": start");
      },
      stop: function() {
          console.log("list " + _listName + ": stop");
      },
      update: function() {
          console.log("list " + _listName + ": update");
      }
    };
    return options;
  }

  $scope.sortableOptionsList = [createOptions('A'), createOptions('B')];
  
  $scope.logModels = function () {
    $scope.sortingLog = [];
    for (var i = 0; i < $scope.rawScreens.length; i++) {
      var logEntry = $scope.rawScreens[i].map(function (x) {
        return x.title;
      }).join(', ');
      logEntry = 'container ' + (i+1) + ': ' + logEntry;
      $scope.sortingLog.push(logEntry);
    }
  };
});

style.css

.list {
	list-style: none outside none;
	margin: 10px 0 30px;
}

.apps-container {
  border: 2px dashed blue;
  margin: 10px 10px 0 0;
  padding: 5px;
}

.app {
	width: 170px;
	padding: 5px 10px;
	margin: 5px 0;
	border: 2px solid #444;
	border-radius: 5px;
	background-color: #EA8A8A;

	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	cursor: move;
}


/***  Extra ***/

body {
	font-family: Verdana, 'Trebuchet ms', Tahoma;
}

.logList {
	margin-top: 20px;
	width: 250px;
	min-height: 300px;
	padding: 5px 15px;
	border: 5px solid #000;
	border-radius: 15px;
}

.logItem {
  margin-bottom: 10px;
}

.logList:before {
	content: 'log';
	padding: 0 5px;
	position: relative;
	top: -1.1em;
	background-color: #FFF;
}

.container {
	width: 750px;
	margin: auto;
}

h2 {
	text-align: center;
}

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

.clear {
  clear: both;
}

ui.sortable-connected-lists-event-order.markdown

ui.sortable connected lists event order

Forked from Thodoris Greasidis's Pen ui.sortable connected lists event order.

A Pen by Alex on CodePen.

License.