Question

I have a application that has jquery draggable div in it.
I have placed four text fields inside the draggable div to get input from user.

Aspx:

    <div id="divAdd" runat="server">
    <input id="txtCode" placeholder="Location Code" maxlength="20" 
    type="text" runat="server" />
    <input id="txtName" placeholder="Location Code" maxlength="20" 
    type="text" runat="server" />
    ...
    </div>
    <div>

Javascript:

 $("#divAdd").draggable({ cursor: 'move', containment: '#divmap',
                drag: function () {
                    fnHandleMove();
                }
            });

I cant place the cursor in those textfield in IPAD by tapping on it. However Desktop version works fine.

If i comment out that javascript part, i am able to place the cursor and keypad shows.

Is this bug with jquery UI-draggable or i am doing anything wrong?

Apart from JqueryUI.js i use JqueryTouchPunch.js and JSPlumb.js in the application.

Any help will be appreciated.

Answer 1

OK here’s a solution if your textfield whatever HTML element is, isn’t focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script. I assume that your element isn’t the draggable one but probably a child of it as my case was.

Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:

...
function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
      return;
    }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');
....

As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:

if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
  simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
  event.stopPropagation();
} else {
  event.preventDefault();
}

This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.

Hope that quick solution helps, BR