furf / jquery-ui-touch-punch

A duck punch for adding touch events to jQuery UI

jQuery UI Touch Punch

Touch Event Support for jQuery UI

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

Visit the official Touch Punch website.

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, because jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to this Touch Punch website.

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

1. Include jQuery and jQuery UI on your page.

   <script src="http://code.jquery.com/jquery.min.js"></script>
   <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

2. Include Touch Punch after jQuery UI and before its first use.

   Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

   <script src="jquery.ui.touch-punch.min.js"></script>

3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

   <script>$('#widget').draggable();</script>

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.

jquery-ui-touch-punch's Issues

Behaviors not respecting handles after first use

Draggable, resizable, etc. which have handles do not respect handles after the first drag or resize.

Resizable gets "stuck"

To reproduce:

1. Go to a page with touch-punch and a resizable element on an iDevice
2. Drag the resize handle out quickly, so that your finger is outside of the element
3. Drag your finger anywhere around the screen.
   The element continues to be draggable, even when the handle isn't touched.

I can have a look at the code and see if I can fix it if you want.
Ad@m

How to use ui-touch-punch to draw line?

I had a problem on how to make my canvas allow touch to draw line, please guide me if anyone know by using the ui-touch-punch, because we i put all the source according the guide..it not working..

'undefined' is not a function

I'm getting 'undefined' is not a function error on iPad. I debugged it and found that it happens in line #154. Somehow $.proxy is undefined.

Combination widgets not working?

Example: draggable resizable dialog is not resizable.

See example in dialog folder at http://furf.com/exp/touch-punch/examples/dialog/default-functionality.html

Click event getting lost AFTER drag

I have a fairly complex web-app that uses jQuery UI for draggable and resizable. I added touch-punch and it works very well. But, there is one oddity.

When I create an element on the page, I make it draggable, resizable, and I add a simple click function $("#item").click(function() { itemClicked(this); });

The click function works FINE until I drag/resize the item. Resize and drag continue to work but that other click function is never called after I resize or drag.

Any thoughts?

Can not drag more than one time

Hi,
i want to make this Jquery UI sample touchable http://jqueryui.com/demos/droppable/photo-manager.html
I can drop an element once, but i can not drag it back or if i did it via link then the element is not dragable anymore.
Is there any solution or hack what i can do?

Thanks!

Cruze

Just a small note on chainability/nesting when touch punching (FYI)

Just a small note on chainability/nesting when touch punching.
Always add dynamically created widget containers before instantiating the widget itself
Thanks so much for making my life easier :)

$('input[type=range]').each(function(){
    var $range=$(this);
    var $slider=$('<div class="slider" />'); 

        // Does not work :(
        $range.after(
            $slider.slider({
                range:'min',
                orientation:'vertical',     
                value:parseFloat($range.attr('value')), 
                min:parseFloat($range.attr('min')), 
                max:parseFloat($range.attr('max')),
                animate: true,
                slide: function(e,ui) { 
                    $range.val(ui.value); 
                }
            })
        ).hide()
        $range.change(function(){ $slider.slider('value',$range.val()); })
}); 



$('input[type=range]').each(function(){
    var $range=$(this);
    var $slider=$('<div class="slider" />');

         // Works like a charm  :)
        $range.after($slider).hide();

        $slider.slider({
            range:'min',
            orientation:'vertical',     
            value:parseFloat($range.attr('value')), 
            min:parseFloat($range.attr('min')), 
            max:parseFloat($range.attr('max')),
            animate: true,
            slide: function(e,ui) { 
                $range.val(ui.value); 
            }
        })
        $range.change(function(){ $slider.slider('value',$range.val()); })
});     

TypeError: 'undefined' is not an object (evaluating 'b.ui.mouse.prototype')

I'm getting the following error when including jQuery UI Touch Punch 0.2.2 to my page and testing it with Capybara Poltergeist (PhantomJS):

TypeError: 'undefined' is not an object (evaluating 'b.ui.mouse.prototype')
  at http://homebase.local:55555/assets/forms/jquery.ui.touch-punch.min.js?body=1:12
  at http://homebase.local:55555/assets/forms/jquery.ui.touch-punch.min.js?body=1:12

Drag not working on iPad Safari

Hello,

I have tried to used the library on the iPad, when testing on Dolphin browser the drag is enables, however on Safari it is not working. Nothing Happens.

Thanks

Jquery fullcalendar multiple cell select on mobile device does not work even after using the touch punch?

I have created a fullcalendar application for mobile device like Android and iPhone using Phonegap. I am using the Jquery Touch Punch Plugin along with the Jquery fullcalendar plugin. The 'select' method of fullcalendar is working fine on the web. I am able to select multiple cell on the month view of the full calendar on web browser. However, on the native android/iPhone app I am not able to select multiple cell(range of dates) of the calendar. All that happens is when I click on the cell to select range of dates then the 'select' method is triggered before allowing me to select multiple dates on the device. Is there anyway to overcome this issue? Thank you in advance. Here is the Jsfiddle [http://jsfiddle.net/veer712/KrZJr/17/]

Draggable in img

I there it's seems to work perfectly into the ipad has long you assign it to a div but does not work when assign to a img, can you help me?

using image maps with drag and drop

Hey there,

I am using image maps with drag and drop
here is my code : http://jsfiddle.net/DEbLe/5/

Now the problem is that drag and drop now works on the phone, but if you drag an object over parts of the image on browser, areas get highlighted but these areas do not get highlighted on the phone if I drag the the object over it.

This must be because the highlight is bound to mouseover as well. Is there any way I can get around this and make the highlighting work on dragover on the phone(m running it on android )

sortable handle

http://stackoverflow.com/questions/6613526/jquery-uisortable-gets-fine-on-ipad-but-normal-links-on-listing-fail-now

Yet.. this creates another issue. once dragged by a handle, the last sorted item moves around when you click anywhere but a handle.

I can confirm that I have the same issue.

The issue also exists with similar plugin mouse.touch

dblclick

Does jui-touch-punch recognize double-tap? I can't seem to make it work when my element is bound to a "dblclick"? Thoughts?

On slight touch(without move), draggable element changes its position. only in mobile

On slight touch(without move), draggable element changes its position only in mobile.
it works fine in desktop ,
check this link in mobile http://cst-ts.excelindia.com/mobiletest1/NetLearning/DragTest.html
How to avoid avoid that unwanted move ?

multiple sliders

when clicking and dragging one slider both sliders move at the same time. they also get stuck.

Can't Edit Forms

If I have a form element inside a draggable area I can't edit it. I'm unable to click inside the form element.

Draggable - Pinch zoom issues after clicking "#" link

Pinch zooming / double-tapping work great on page load, but when you click either the "projects" or "products" links (which both have an href of "#"), and THEN try pinching or double-tapping, my draggable box reacts to the pinch zooming and jump all over the screen.

http://future.thefutureforward.com/~steady/

Let me know your thoughts, and thanks for the amazing plugin!

disable sortable

Thanks for the great plugin!

I'm trying to toggle enable/disable sortable.

$('ul').sortable( "disable" );

This works well on on the browser but not on iPhone/simulator. Is there any other way to do this?

Thank you!

On mousedown inital mousemove event causes helper to appear at edge of screen

Have issue on ipad.

I press down and keep my finger in same spot.
Looking at the events created a mousemove event shows position of last registered click (edge of screen for first finger down).

This issue causes the helper to appear in strange positions, when your helper is defined via function.

Not sure if anyone has seen similar

Dragging twice

Hello,

It appears that using jQuery UI's draggable/droppable, moving a div from a draggable onto a droppable makes it no longer draggable.

I've created a sample that demonstrates this: http://pastebin.com/mRQmL3Xa

One can drag from the lower region up but once that is done one cannot drag again down below. This works however on the computer, and surprisingly on a Galaxy tablet (Android)

NOTE: I have tried changing the .bind calls to .live (and to .delegate) but without success.

Windows Phone 7 support ?

Hi,

Thanks for provide this little script which help me a lot with Jquery UI functions.

However, when i tried to test my work on Windows Phone 7 emulator (in the Windows Phone SDK), the slider won't work. I don't know if the script is supposed to support IE mobile, but have you a fix or another method to offer me ?

Thanks :)

The jQuery Modal Form Example doesnt work

The jQuery Modal Form Example doesnt work with touchpunch.

On your own Page in the "Try Some Examples" section I've selected the "Dialog" section and went to it's "Modal From" view.

There I tried to move the dialog, but obviously it didnt move.

The environment was an iPad 1

CKEditor drop downs within Jquery UI draggable dialog not pickable

Hi,

Problem is remarkably similar to issue #5, however I am using the latest (0.2.2) version.

CKEditor Jquery basically will receive a click event for a drop down, however once the drop down is displayed you cannot select the members of the drop down. It seemingly is interpreting it as some sort of segmented drag event.

The CKEditor menu works fine normally under mobile devices (they handle all of the mobile device eventing such as this internally), so I think in this case I've got 2 libraries trying to interpret mobile events and they are getting in eachother's way.

Is there a way that I could "opt out" of the jquery touch punch binding process based on a classname or an id?

In this particular case I do have a draggable window, so I want to use your library, but I simultaneously cannot use it as obviously CKEditor will become unusable.

The following code illustrates the problem:

   $(function() {
          var config = {
                 extraPlugins : 'stylesheetparser',
                 contentsCss : 'assets/parsesample.css,
                 stylesSet : []
          };

          $("#edit_html").dialog({
                 autoOpen: true,
                 width: 990,
                 height: 620,
                 modal: true,
                 open: function() {
                     $(this).find("textarea").ckeditor(config);
                 },
                 close: function() {
                     $(this).find("textarea").ckeditorGet().destroy();
                 },
                 buttons: {
                     Close: function() {
                         $(this).dialog('close');
                     }
              }
          });
    });

I can post up a working version of it if that will help you.

Slider dosnt work on Ipad 3 or SamsunG Galaxy2

Doesn't work

jQuery v1.8.2
jquery-ui-1.8.24

cheers
Przemek

Does not differentiate betweeb single-finger/double-finger action

If I have a draggable element as part of a list which needs to

1. Scroll the list if 2-fingers are used Vs
2. Drag if one-finger is used

The script always does the 2nd action (i.e. Drag) and does not scroll the list even if 2-fingers are used.

Touch is not being detected on Windows 8 apps

I tried to include the touch-punch in my Windows 8 app to allow sortable() by touch. But alas it's not working.

Slider stop callback function not always firing

The trouble is that sliders stop callback function fires periodically ( sometimes fires, sometimes doesn't fire) while the slider slides. Have anyone else been experiencing the same issue ?

Using Touch-Punch with Handlebars.js

Has anyone run into problems when using Touch-Punch with "this.$el" as opposed to naming an explicit draggable element?

Everything is fine in a browser but the touch on iPad is not working.

Thanks!

Demos currently not working on iPad (5.1.1) + iPhone (5.1.2) + iPad Simulator (4.3)

I recently discovered that this plugin has problems right now resulting in "undefined is not a function" errors.

The weird thing is that this behaviour occurs on all Demo's on the site.

I tested with iPhone, iPad and iPad Simulator - no one is working.

I got a screenshot of the Debug log here http://www.uv7.de/ftp/pub/dropbox/10%20um%2018.04.33.png

Scroll inside draggable elements contents doesn't work on Ipad

Click events inside draggable do not work

If you create a draggable() element with child elements that have .click() the click function is not called by user tapping. I've added the touch-punch library after jquery ui, and verified that drag objects do indeed drag with touch events on the iPhone, but any child click() functions do not trigger when the user taps on the child element. The click() mouse event on computer still works as expected, just not on the mobile. Ideas?

Multitouch multiple sliders

Basically I want to have a user to be able to control two different sliders simultaneously. I was wondering if that could be added (with a fixed unscalable viewport perhaps). I see in the code that multitouch events are specifically ignored and am not sure how this would be implemented. Here's a jsfiddle with everything except the fixed viewport: http://jsfiddle.net/Glench/CUGSH/embedded/result/

Touch punch for non jquery ui codes

I just want to fire an event when a text is selected through mouse down and up and the same for touch start and touch end.I am using touch punch but its not working in ipad.

jQuery UI integration?

This was a very nice lib.

I wonder if it would be beneficial to integrate this in jQuery UI by default.

Perhaps you guys could communicate with each other to make that happen?

this._mouseDownEvent is not defined bug

In the new version of jQuery UI, they have a variable called this._mouseDownEvent. This needs to be placed inside your _mouseDown function definition. Here is what I did to temporarily fix the bug. After I load in your jquery.ui.touch-punch.js file, I duck punch it to add this variable. Obviously adding this._mouseDownEvent directly into your _mouseDown function would be the fix.

var _old_mouseDown = $.ui.mouse.prototype._mouseDown;
$.ui.mouse.prototype._mouseDown = function(event){
this._mouseDownEvent = event;
return _old_mouseDown.call(this, event);
}

Thanks for a great lib!

slider widget is not working

slider widget gives undefined error

Z-index not working

First of all the dragging and dropping works flawlessly!

I've just got one problem, on my desktop my draggable is above everything else, but on ipad it's not.

I use the following code, any ideas how to solve it?

$('.draggable').draggable({ 
  revert: 'invalid', 
  revertDuration: 250,
  zIndex: 1000,

  start: function(event, ui) {
    ui.helper.data('original-position', ui.helper.offset());
  },
  stop: function(event, ui) {
    $(this).removeClass('ui-draggable-hover')
    ui.helper.offset(ui.helper.data('original-position'));
  }
});

Thanks for a great lib!

Draggable element not usable with an iPad

I tried to use jquery-ui-touch-punch in addition to jQRangeSlider, a jquery UI widget.

You can try the demo here (without touch events) : http://ghusse.github.com/jQRangeSlider/stable/demo/

I added a reference to jquery-ui-touch-punch just after jquery ui on the demo page, but it still does not work with my iPad simulator. Any idea ?

sortable is not working on ipad

I use jquery 1.42, jquery-ui with jqtouch and the sortable does not respond to click and drag on ipad.
It does work on the browser.

Elik

Breaks draggable in Internet Explorer 9 (IE9)

Draggable breaks in IE9 when including this script. The example from the site: http://furf.com/exp/touch-punch/draggable.html doesn't work also.

I'm only using the draggable portion of this plugin, so I haven't tested others.

Helper and Clone problems

I am attempting to use your plugin for a "cart-like" application. I am taking a draggable item and dragging it to a receiving DIV. I am using a helper DIV during drag (I've used clones as well) as a visual clue for the user. Once in the receiving panel, the user has the option to delete it and for that I am using remove() to remove it from the DOM.

I am experiencing two problems on the iPad:

1. On touch-drag, the clone/helper will flash in the upper left corner even while dragging it far away from the upper left corner. It will also flash when hovering over the receiving DIV.
2. Once an item has been removed from the receiving DIV, any touch-drags on subsequent items will "ghost" within the receiving DIV and that old "ghost" can initiate the drop.

Everything is fine on desktop.

Thanks in advance for your help.

Maurice

Does not work on iPad Safari

Tested on IOS ver 4.3.3 on iPad Safari..Does not work..

AngularJS + JQuery Mobile + UI Issue

I have a jquery-mobile listview with buttons (using ul-li-aside class) in a mobile website that uses AngularJS, jQuery Mobile, jQuery UI and finally touchpunch. I managed to get everything playing nicely and make the list sortable.

I would just want to know why, when used in a non-touch device, the buttons in each list item needs to be clicked twice in order for touchpunch to recognize it as a click event and execute the handler.

Is this normal?

Jquery >1.6 Slider issue

Tapping anyhwere in the slider area should set a new value and move the handle. This does only work until the handle has been initially moved by dragging. After that tapping causes no reaction. The "change" event fires nevertheless, it does not set a new ui.value though. This is independent from the animate property.

Recreate:

1. Create a jquery ui slider and include the jquery-ui-touch-punch script
2. Control the slider once by dragging the handle
3. Tap next to the handle to control the slider by clicking

The phenomenon does not occur if jquery < 1.6 is used
Tested on ipad 1/2 and ipad simulator

Complex Drag exercisesand Drop not working on Ipad with touch-punch

Hi,

I've followed instructions and added the includes and files to an existing drag and drop file, but it still doesn't work on Ipad ( works fine on Intel).
The exercises are quite complex, exercises and am willing to make a donation to have them working fine on the Ipad and Iphone platforms.

Please let me know if you can help
( I'm willing to send the code for you to look at, but not to an open forum.)

Thank you.

Richard

Greedy capture on widgets with handles prevents window scroll

Draggable not working on iPad (1) Safari

Draggable/droppable working on desktop. Any idea why it wouldn't be working on the iPad?

http://bit.ly/yunodra

Edit: Shortened URL to increase the chances of someone looking at this on an iPad.

Conflict with jQuery Effects (as "show", "hide", etc)

The problem is very simple. The solution I still do not know.

$(function() {
    // It works (as in example)
    //$("#dialog").dialog();

    // But, It does not work on the iPad (Because of the effect "show", the element is no longer draggable.)
    $("#dialog").dialog({
        show : 'slide'
    });
});