Sortable Drag&Drop Lists with knockout connected with buttons.

Sortable Drag+Drop Lists with knockout connected with buttons. List1: plain List2: Grouped by.

by Sergio Sánchez

HTML

<script src="http://kendo.cdn.telerik.com/2015.1.225/js/kendo.all.min.js"></script>
<script src="https://bxaccess.com/FundMgmt/scripts/3rdParty/knockout/knockout-3.3.0.js"></script>
<script src="https://bxaccess.com/FundMgmt/scripts/3rdParty/knockout/knockout-kendo.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.225/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.225/styles/kendo.common.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<!-- TEMPLATE START -->

<script type="text/html" id="selectedLosses">
  <div>
    <div class="sortable-item-base sortable-item-header lossr-sortable-item-header">
      <div class="col-md-4 gray no-padding">DEAL/POSITION</div>
      <div class="col-md-2 gray no-padding">LOSS TYPE</div>
      <div class="col-md-2 gray no-padding">LOSS DATE</div>
      <div class="col-md-3 gray pull-right-text no-padding">AMOUNT</div>
      <div class="col-md-1 gray no-padding add-remove-buttons" data-bind="click:$root.removeAllRecoupmentLoss"> - </div>
      <div class="clearfix"></div>

    </div>
  </div>
  <div class="sortable-drop " data-bind="foreach: source, jquerySortable: {
                        connectWith: name,
                        update:update
                    }">
    <div class="sortable-item sortable-item-base lossr-sortable-item sort-item">
      <div class="col-md-4 no-padding" data-bind="text: TrancheName"></div>
      <div class="col-md-2 no-padding" data-bind="text: LossType"></div>
      <div class="col-md-2 no-padding" data-bind="date: LossDate"></div>
      <div...

CSS

.group,
.sort-item {
  background: #fff;
  border: solid 1px #ccc;
}

.sort-item {
  height: 35px;
  padding: 10px;
}

.group {
  padding: 10px;
}

JavaScript

var json = {
  "Losses": [{
    "TrancheName": "Sentosa 1 - BTOF - I (Cayman) - NQ L.P.",
    "LossType": "Unrealized Loss",
    "InvestmentCategory": "Null",
    "DealName": "Sentosa Cove",
    "FromEntityOId": 0,
    "TrancheId": 6599728,
    "LossTypeId": 1,
    "LossDate": "03/31/2015",
    "RecoupableLossAmount": 361046.97000000000000000000000,
    "RecoupmentOrder": -1,
    "InvestmentCategoryId": 0,
    "AdjustmentFactor": {
      "Numerator": 1.0,
      "Denominator": 1.0
    },
    "AdjustedRecoupableLossAmount": 361046.97000000000000000000000
  }, {
    "TrancheName": "Lombard 1 - BTOF - I (Cayman) L.P.",
    "LossType": "Unrealized Loss",
    "InvestmentCategory": "Null",
    "DealName": "Lombard Group",
    "FromEntityOId": 0,
    "TrancheId": 6447170,
    "LossTypeId": 1,
    "LossDate": "06/30/2015",
    "RecoupableLossAmount": -1275754.1900000000000000000000,
    "RecoupmentOrder": -1,
    "InvestmentCategoryId": 0,
    "AdjustmentFactor": {
      "Numerator": 1.0,
      "Denominator": 1.0
    },
    "AdjustedRecoupableLossAmount": -1275754.1900000000000000000000
  }, {
    "TrancheName": "Versace - BTOF 1 - BTOF - I (Cayman) L.P.",
    "LossType": "Unrealized Loss",
    "InvestmentCategory": "Null",
    "DealName": "Gianni Versace S.p.A",
    "FromEntityOId": 0,
    "TrancheId": 6184555,
    "LossTypeId": 1,
    "LossDate": "09/30/2015",
    "RecoupableLossAmount": 6760.7000000000000000000000000,
    "RecoupmentOrder": -1,
    "InvestmentCategoryId": 0,
    "AdjustmentFactor": {
      "Numerator": 1.0,
      "Denominator": 1.0
    },
    "AdjustedRecoupableLossAmount": 6760.7000000000000000000000000
  }, {
    "TrancheName": "George 1 - BTOF - I (Cayman) - NQ L.P.",
    "LossType": "Unrealized Loss",
    "InvestmentCategory": "Null",
    "DealName": "Round Hill Dutch Residential Investment SCS",
    "FromEntityOId": 0,
    "TrancheId": 6184617,
    "LossTypeId": 1,
    "LossDate": "09/30/2015",
    "RecoupableLossAmount":...