Получение jQuery drag-drop для работы на iPad

Question

У меня есть несколько пользовательских перетаскиваний, написанных в jQuery, и я хочу сделать то же самое на iPad.

Вот мой код

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

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

Теперь я сделал несколькоисследовал и искал @ http://popdevelop.com/2010/08/touching-the-web/ и внес некоторые изменения, например, только для перетаскивания, чтобы проверить его, но, похоже, это не сработало

$.('.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);
};

Я также посмотрел на http://code.google.com/p/jquery-ui-for-ipad-and-iphone/, но не смог найти способ изменить мой код, чтобы он соответствовал ему и заставил его работать.

Любая помощь!

Answer 1

Однажды я использовал сопоставление событий касания с событиями мыши, чтобы включить перетаскивание (пользовательский интерфейс jQuery draggable) на сенсорных устройствах. Работал так:

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();
}​

как обработчик, а затем вы отобразите события как:

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

С этим отображением событий вы можете просто использовать его, как в "управляемой мышью" среде.

Работало нормально, хотя, конечно, оно немного ограничено, так как вы теряете такие вещи, как множественные касания.

Answer 2

Мы использовали функцию javascript elementFromPoint для замены mouseOver один раз, когда элементы совпадают, вы можете сделать вызов.