Reputation: 14317

ipad drag and drop

I need to implement drag and drop for Ipad.

I tried this solution: http://www.gotproject.com/blog/post2.html

But since I am using JQuery myself, it conflicts and does not work.

How can I use JQuery drag and drop for IPad?

Upvotes: 12

Answers (6)

Steve Meisner

Reputation: 756

Apple has a Section called "Handling Multi-Touch Events" here: https://developer.apple.com/library/content/documentation/EventHandling/Conceptual/EventHandlingiPhoneOS/multitouch_background/multitouch_background.html

It is the official Apple guide on how you can handle almost all of your touch events with the standard controls and gesture recognizers in UIKit.

Upvotes: 2

Youry

Reputation: 11

I have worked on a fix to this issue check my github: https://github.com/youryss/fixdragtablet

I hope it works for you

Upvotes: 0

Michael Angstadt

Reputation: 76

If you aren't using jQuery UI, use the fork I created https://github.com/mikeangstadt/jquery-ui-touch-punch.git to hook up touch handler's using jQuery by firing the already defined mouse events.

Works well on iOS6, haven't tested for Android or others.

Upvotes: 5

doctorme

Reputation: 21

Confirmed that furf's jquery-ui-touch-punch works on the iPad.

Getting it to work is as easy as including "jquery.ui.touch-punch.js" after you've included jquery-ui and jquery itself. For example:

HTML:

<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

    <!-- touch capability for tablets/phones -->
    <script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
</head>

Javascript:

//
// assume that html_string is a valid string
// containing some element you want to be draggable
// which needs to be added to the DOM
//
function addItemToUIList (list, html_string) {
    var item = $(list).append (html_string);

    // now, using jqui and touch-punch, we can make it draggable
    item.draggable ();
}

Now "item" can be dragged around on screen on the ipad as well as in chrome on the desktop.

Upvotes: 2