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

我曾经使用映射touchevents到mouseevents来在触摸设备上启用拖放（jQuery UI的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一次，当元素匹配时你可以进行调用。

让jQuery拖放到iPad上工作

2 个答案: