list drag

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default-v2.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/cultures/kendo.culture.ru-RU.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.timezones.min.js"></script>
<div id="example" ng-app="KendoDemos" ng-controller="MyCtrl">

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="value in ds1" class='item'>
      <p>{{value.id}}</p>
      <p>{{value.name}}</p>
    </div>
  </div>

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="value in ds2" class='item'>
      <p>{{value.id}}</p>
      <p>{{value.name}}</p>
    </div>
  </div>

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="value in ds3" class='item'>
      <p>{{value.id}}</p>
      <p>{{value.name}}</p>
    </div>
  </div>
</div>

<script>
  angular.module("KendoDemos", ["kendo.directives"])
    .controller("MyCtrl", function($scope, $timeout) {

    $scope.ds1 = new kendo.data.ObservableArray([{id:	1	,name:"name	1	"},
                                                 {id:	2	,name:"name	2	"},
                                                 {id:	3	,name:"name	3	"},
                                                 {id:	4	,name:"name	4	"}]);

    $scope.ds2 = new kendo.data.ObservableArray([{id:	5	,name:"name	5	"},
                                                 {id:	6	,name:"name	6	"},
                                                ...

CSS

.item {
  background-color: #aaffaa;
  display: inline-block;
  border-width: 1px;
  width: 100px;
  margin: 5px;
}