CODEWITHSUNDEEP
jqueryipaddrag-and-drop
Vivek
Vivek

Reputation: 1461

Getting jQuery drag-drop to working on iPad

I have some custom drag-drop written in jQuery and want to be able to do the same on a iPad.

Here is the my code

    $('.item').draggable({
        opacity:0.7,
        helper:'clone',
        cursorAt:{
            top:0,
            left:0
        }
    });

$('.selected-plan').droppable({
        drop:queryBuilder.drop,
        opacity:0.1,
        hoverClass:'item-arrived'
    });

Now I did some research and looked up @ http://popdevelop.com/2010/08/touching-the-web/ and made some changes, like only for the drag, to test it, but it didn't seem to work

$.('.item').draggable = function() {
  var offset = null;
  var start = function(e) {
    var orig = e.originalEvent;
    var pos = $(this).position();
    offset = {
      x: orig.changedTouches[0].pageX - pos.left,
      y: orig.changedTouches[0].pageY - pos.top
    };
  };
  var moveMe = function(e) {
    e.preventDefault();
    var orig = e.originalEvent;
    $(this).css({
      top: orig.changedTouches[0].pageY - offset.y,
      left: orig.changedTouches[0].pageX - offset.x
    });
  };
  this.bind("touchstart", start);
  this.bind("touchmove", moveMe);
};

I have also looked at http://code.google.com/p/jquery-ui-for-ipad-and-iphone/, but couldn't find a way to change my code to fit it and get it working.

Any help!

Upvotes: 0

Views: 2923

Answers (2)

Mace
Mace

Reputation: 1

We used the javascript function elementFromPoint to replace the mouseOver once, when the elements match you can do a call.

Upvotes: 0

m90
m90

Reputation: 11822

I once used mapping touchevents to mouseevents to enable drag and drop (jQuery UI's draggable) on touch devices. Worked like this:

function touchHandler(event) {
    var touches = event.changedTouches;
    var first = touches[0];
    var type = "";

    switch (event.type) {
    case "touchstart":
        type = "mousedown";
        break;
    case "touchmove":
        type = "mousemove";
        break;
    case "touchend":
        type = "mouseup";
        break;
    default:
        return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0 /*left*/ , null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}​

as a handler and then you'd map the events like:

document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);

With this event mapping done you could just use it like in a "mouse-driven" environment.

Worked fine, although it of course is a little limited as you lose things like multiple touches.

Upvotes: 1

Related Questions