让jQuery拖放到iPad上工作

问题描述：

我有一些用jQuery编写的自定义拖放，并希望能够在iPad上做同样的操作。让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/，但找不到方法来更改我的代码以适应它并使其工作。

任何帮助！

答

我曾经使用过映射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);

有了做，你可以只在一个“鼠标驱动”环境中使用这样的事件映射。

工作正常，虽然它当然有点有限，因为你失去了多重接触的东西。

这是真棒，很好，但现在点击按钮/ datepicker不工作，任何解决方案？ – Vivek 2012-03-23 12:19:56

@livingtolearn它不应该弄乱点击，至少它没有当我用它。你是否将触碰事件绑定到有问题的元素？ – m90 2012-03-23 12:38:22

类型，因为一旦元素被拖放，我将元素添加到文本框或日期选择器，现在我试图注释掉preventDefault（）和点击工作，但在iPad上整个屏幕也会移动:( – Vivek 2012-03-23 13:21:47

答

我们使用javascript函数elementFromPoint来替换mouseOver一次，当元素匹配时您可以进行调用。

让jQuery拖放到iPad上工作

相关推荐