jQueryのドラッグドロップを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 UIのdraggable）を有効にするために、私はかつてtoeventheventsをmouseeventにマッピングしました。このように働いた：ハンドラとして

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を一度置き換えました。要素が一致すると呼び出しが可能です。