タッチデバイス用のJavascriptドラッグアンドドロップ[終了]

タッチデバイスで動作するドラッグ＆ドロッププラグインを探しています。

「ドロップ可能な」要素を許可するjQuery UIプラグインと同様の機能が欲しいのですが。

プラグインjqtouchドラッグサポートしていますが、ノードロップ。

こちらはiPhone / iPadのみに対応したドラッグ＆ドロップです。

誰でも私にandroid / iosで動作するドラッグ＆ドロッププラグインの方向を教えてもらえますか？

...または、ドロップ機能のためにjqtouchプラグインを更新することが可能かもしれません。AndriodとIOSですでに実行されています。

ありがとう！

ドラッグアンドドロップにJquery UIを使用して、マウスイベントをタッチに変換する追加のライブラリを必要に応じて使用できます。推奨されるライブラリはhttps://github.com/furf/jquery-ui-touch-punchです。で、これは、JQuery UIからのドラッグアンドドロップがタッチデバイスで機能するはずです

または、私が使用しているこのコードを使用できます。また、マウスイベントをタッチに変換し、魔法のように機能します。

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

そしてあなたのdocument.readyでinit（）関数を呼び出すだけです

ここからコードが見つかりました

これを使用して「クリック」機能を維持したい人は（John Landheerがコメントで述べているように）、いくつかの変更を加えるだけで実行できます。

いくつかのグローバルを追加します。

var clickms = 100;
var lastTouchDown = -1;

次に、switchステートメントを元のステートメントから次のステートメントに変更します。

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

「クリック」を好みに合わせて調整することもできます。基本的には、「タッチスタート」の直後に「タッチエンド」が続き、クリックをシミュレートするだけです。

上記のコードをありがとう！-私はいくつかのオプションを試しました、そしてこれはチケットでした。preventDefaultがiPadでのスクロールを妨げているという問題がありました。現在、ドラッグ可能なアイテムをテストしており、これまでのところうまくいきます。

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

gregpress answerと同じ解決策がありましたが、ドラッグ可能なアイテムはIDではなくクラスを使用していました。動作するようです。

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

私が知っている古いスレッド......

@ryuutatsuoの答えの問題は、「クリック」に反応する必要のある入力やその他の要素（入力など）もブロックすることです。そのため、このソリューションを作成しました。このソリューションにより、任意のタッチデバイス（またはコンピュータ）でのmousedown、mousemove、およびmouseupイベントに基づく既存のドラッグアンドドロップライブラリを使用できるようになりました。これはクロスブラウザソリューションでもあります。

私はいくつかのデバイスでテストしましたが、高速に動作します（ThreeDubMediaのドラッグアンドドロップ機能と組み合わせて（http://threedubmedia.com/code/event/dragも参照））。これはjQueryソリューションなので、jQueryライブラリでのみ使用できます。一部の新しい関数はIE9以降では正しく機能しないため、jQuery 1.5.1を使用しました（新しいバージョンのjQueryではテストされていません）。

ドラッグまたはドロップ操作をイベントに追加する前に、この関数を最初に呼び出す必要があります。

simulateTouchEvents(<object>);

次の構文を使用して、入力用にすべてのコンポーネント/子をブロックしたり、イベント処理を高速化したりすることもできます。

simulateTouchEvents(<object>, true); // ignore events on childs

これが私が書いたコードです。私はいくつかの素晴らしいトリックを使用して物事の評価をスピードアップしました（コードを参照）。

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

機能：最初は、シングルタッチイベントをマウスイベントに変換します。ドラッグする必要のある要素の要素内/要素によってイベントが発生したかどうかを確認します。input、textareaなどの入力要素の場合、翻訳はスキップされます。または、標準のマウスイベントがそれにアタッチされている場合は、翻訳もスキップされます。

結果：ドラッグ可能な要素のすべての要素がまだ機能しています。

幸せなコーディング、greetz、Erwin Haantjes