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">

  <kendo-button icon="'add'" k-click='add'></kendo-button>
  <kendo-button icon="'css'" k-click='show'></kendo-button>

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="item in ds | filter:{status:1} | orderBy:'sort'" 
         class='item'>
      <div>
        <span>{{item.id}}</span><br/>
        <span>{{item.name}}</span><br/>
        <span>{{item.sort}}</span><br/>
      </div>
    </div>
  </div>

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="item in ds | filter:{status:2}" class='item'>
      <div>
        <span>{{item.id}}</span><br/>
        <span>{{item.name}}</span><br/>
        <span>{{item.sort}}</span><br/>
      </div>
    </div>
  </div>

  <div class='sort k-widget' kendo-sortable k-connect-with="'.sort'" 
       k-placeholder="placeholder" style="min-height:100px;">
    <div ng-repeat="item in ds | filter:{status:3}" class='item'>
      <div>
        <span>{{item.id}}</span><br/>
        <span>{{item.name}}</span><br/>
        <span>{{item.sort}}</span><br/>
      </div>
    </div>
  </div>
</div>

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

    $scope.ds = new...

CSS

.item {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  padding: 5px;
  width: 88px;
  height: 88px;
  overflow: hide;
}

.item div {
  background-color: #aaffaa;
  width: 88px;
  height: 88px;
    overflow: hidden;
}