2

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

Community
  • 1
  • 1
jqcoder
  • 21
  • 2

1 Answers1

1

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(...);
Joakim Johansson
  • 3,196
  • 1
  • 27
  • 43
  • Awesome; so how do I include the jqtouch plugin? I downloaded the file and saved it in the same directory, so what is the javascript version of "include xyz" in java and where in my code should it go? – jqcoder Jun 15 '11 at 14:12
  • The same way you included jquery... `` – Jeff Jun 15 '11 at 14:17