list sort drag angular

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>
<script>
  kendo.culture("ru-RU");
</script>

<div id="example" ng-app="KendoDemos" ng-controller="MyCtrl">

  <kendo-button icon="'k-icon k-i-refresh'" k-on-click="refresh()"></kendo-button>
  <kendo-button icon="'k-icon k-i-save'" k-on-click="save()"></kendo-button>
  <kendo-button icon="'k-icon k-i-add'" k-on-click="add()"></kendo-button>

  <div class='list' kendo-sortable k-connect-with="'.list'" k-filter="'.item'" k-on-change="move1(kendoEvent)">
    <div kendo-list-view="lv1" k-data-source="v1" style="min-height:100px;">
      <div class='item' k-template>
        <span>{{dataItem.name}}</span>
        <br/>
        <span>{{dataItem.sort}}</span>
        <br/>
        <span>{{dataItem.status}}</span>
      </div>
    </div>
  </div>

  <div class="list" kendo-sortable k-connect-with="'.list'" k-filter="'.item'" k-on-change="move2(kendoEvent)">
    <div kendo-list-view="lv2" k-data-source="v2" style="min-height:100px;">
      <div class='item' k-template>
        <span>{{dataItem.name}}</span>
        <br/>
        <span>{{dataItem.sort}}</span>
        <br/>
        <span>{{dataItem.status}}</span>
      </div>
    </div>
  </div>

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

    var d = [{id:	1	,name:"name	1	",status:1,sort:	1	},
             {id:	2	,name:"name	2	",status:1,sort:	2	},
             {id:	3	,name:"name	3	",status:1,sort:	3	},
           ...

CSS

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