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' kendo-sortable k-connect-with="'.sort'" k-filter="'.item'" k-placeholder="placeholder">
    <div kendo-list-view k-data-source="ds1" style="min-height:100px;">
      <div class='item' k-template>
        <p>#:id#</p>
        <p>#:name#</p>
      </div>
    </div>
  </div>

  <div class='sort' kendo-sortable k-connect-with="'.sort'" k-filter="'.item'" k-placeholder="placeholder">
    <div kendo-list-view k-data-source="ds2" style="min-height:100px;">
      <div class='item' k-template>
        <p>#:id#</p>
        <p>#:name#</p>
      </div>
    </div>
  </div>

  <div class='sort' kendo-sortable k-connect-with="'.sort'" k-filter="'.item'" k-placeholder="placeholder">
    <div kendo-list-view k-data-source="ds3" style="min-height:100px;">
      <div class='item' k-template>
        <p>#:id#</p>
        <p>#:name#</p>
      </div>
    </div>
  </div>

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

    $scope.ds1 = [{id:	1	,name:"name	1	"},
                  {id:	2	,name:"name	2	"},
                  {id:	3	,name:"name	3	"},
                  {id:	4	,name:"name	4	"}];
    $scope.ds2 = [{id:	5	,name:"name	5	"},
                  {id:	6	,name:"name	6	"},
                  {id:	7	,name:"name	7	"},
                  {id:	8	,name:"name	8	"}];

    $scope.ds3 = [];

    $scope.placeholder...

CSS

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