To extend a jQuery UI widget with your own widget, 3 important things :

  • jQuery UI uses the data() function to store information related to the widget. The data identifier of the element will be your widget name, so you must copy its value to the original data value.
  • For each function you want to extend, call the original function of the widget with apply().
  • Set the default options.

$.widget("ui.customsortable", $.extend({}, $.ui.sortable.prototype, {
  _init: function(){
    this.element.data('sortable', this.element.data('customsortable'));
    return $.ui.sortable.prototype._init.apply(this, arguments);
  // Override other methods here.
$.ui.customsortable.defaults = $.extend({}, $.ui.sortable.defaults);

Syndicate content