Wrapper around jQuery UI sortable

sortable-list.js

var DefineMap = require('can-define/map/'),
  Component = require('can-component'),
  batch = require('can-event/batch/'),
  $ = require('can-jquery');

require('jquery-ui/ui/widgets/sortable');

require('./sortable-list.css!');

var ViewModel = DefineMap.extend({
  list: {
    value: Array
  },
  to: {
    type: 'number'
  },
  from: {
    type: 'number'
  }
});

Component.extend({
  tag: 'sortable-list',
  ViewModel: ViewModel,
  events: {
    inserted: function() {
      var viewModel = this.viewModel;

      $(this.element).sortable({
        update: function( ev, ui ) {
          viewModel.to = ui.item.index();
        },
        start: function( ev, ui ) {
          viewModel.from = ui.item.index();
        }
      });
    },
    '{element} sortstop': function() {
      var item = this.viewModel.list[this.viewModel.from];
      batch.start();
      this.viewModel.list.splice(this.viewModel.from, 1);
      this.viewModel.list.splice(this.viewModel.to, 0, item);
      batch.stop();
    }
  }
});