"Chaining" onto draggable call to enable touch functionality

I'm very new to jquery ui but due to the nature of my project I've sort of been thrown right into the deep end! Basically what I need help with is that I have a file that applies certain customizations to the jquery ui draggable widget, and I want to further customize to enable touch capability so that the widget is functional on mobile touch screen devices. That is, my code looks something like this:

/*
 * jQuery UI Draggable
 *
 * Depends:
  *  jquery.ui.core.js
  *  jquery.ui.mouse.js
  *  jquery.ui.widget.js
  */

 (function( $, undefined ) {

 $.widget("ui.draggable", $.ui.mouse, {
     widgetEventPrefix: "drag",
     options: {
         addClasses: true,
         appendTo: "parent",
         axis: false,
         connectToSortable: false,
         containment: false,
         cursor: "auto",
         cursorAt: false,
         grid: false,
         handle: false,
         helper: "original",
         iframeFix: false,
         opacity: false,
         refreshPositions: false,
         revert: false,
         revertDuration: 500,
         scope: "default",
         scroll: true,
         scrollSensitivity: 20,
         scrollSpeed: 20,
         snap: false,
         snapMode: "both",
         snapTolerance: 20,
         stack: false,
     开发者_运维百科    zIndex: false
     },
     _create: function() {

         if (this.options.helper == 'original' &&      !(/^(?:r|a|f)/).test(this.element.css("position")))
             this.element[0].style.position = 'relative';

         (this.options.addClasses && this.element.addClass("ui-draggable"));
         (this.options.disabled && this.element.addClass("ui-draggable-disabled"));

         this._mouseInit();

     },

     destroy: function() {
         if(!this.element.data('draggable')) return;
         this.element
             .removeData("draggable")
             .unbind(".draggable")
             .removeClass("ui-draggable"
                 + " ui-draggable-dragging"
                 + " ui-draggable-disabled");
         this._mouseDestroy();

         return this;
     },

...etc.

I've seen this post: How can I make a jQuery UI 'draggable()' div draggable for touchscreen?, and it looks like an ideal solution for what I'm trying to do, but I'm not sure what is meant by " chain this onto my jQuery UI draggable() call ". Where in my code should the block:

.touch({
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
});

go? This may be a stupid question, sorry. I'm a beginner! :) Thanks!!

Well, chaining works like this, imagine you have the following code:

$('#someDiv').show();
$('#someDiv').addClass('someClass');
$('#someDiv').removeClass('someOtherClass');

Instead you can chain these calls like such:

$('#someDiv').show().addClass('someClass').removeClass('someOtherClass');

This works because jQuery functions return the element afterwards, hence you can "chain" function calls on the same element, or a resulting element.

And in your case, I believe it should be chained after the end of the call to $.widget:

$.widget(...).touch({
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
});

Or the other way it can be done:

$('#yourElement').draggable(...).touch(...);