2017-02-18 1 views
0

私はこのコンテンツを持っています。実行時にいくつかの値をPHPページに送信するために使用するドラッグアンドドロップスクリプト。それはシステム上の魅力のように動作しますが、私がモバイルでページを開くと、ドラッグされます。HTML/JSラップトップ版のコンテンツをドラッグアンドドロップしますが、モバイルビューでは表示されません

コード::

<html> 
<head> 
<script> 
/* Event fired on the drag target */ 
function dragStart(event) { 
    event.dataTransfer.setData("Text", event.target.id); 
} 

/* Events fired on the drop target */ 
function allowDrop(event) { 
    event.preventDefault(); 
} 

function drop(event) { 
    event.preventDefault(); 
    var data = event.dataTransfer.getData("Text"); 
    event.target.appendChild(document.getElementById(data)); 
    document.getElementById("submit").submit(); 
} 
</script> 
</head> 
<body> 
<form action="page1.php" method="post" id="submit"></form> 

<ul class="link">      
    <li ondragstart="dragStart(event)" draggable="true" id="dragtarget">500/</li> 
</ul> 

<div class="rect2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <span class="amnt"> value here </span> 
</div> 

</body> 
</html> 

は、今ではコンピュータに完全に正常に動作しますが、それはモバイル版に引きずられないよう\

すべてのヘルプは高く評価され...行く...

+0

[html5ドラッグアンドドロップforモバイル](0120-17759/html5-drag-and-drop-for-mobile) – Shota

+0

JQuery Touchを使用する –

答えて

1

デフォルトでは、タッチイベントを代わりに使用することになっています。

this shimを含めると、ドラッグイベント&のドロップイベントが、モバイルでもコードを変更することなく動作するように見えます。

+0

そのコードの新しいjsと私のHTMLにそれを含める、それは? – harishk

+0

あなたのコードで試してみましたが、そのスクリプトを含めればうまくいくように思えました。 – Bemmu

+0

解決策は機能しますが、同じページに複数の画像があり、別のページにリンクがありますが、このスクリプトを追加した後、画像のリンクが機能していません。その上に... – harishk

関連する問題