web-dev-qa-db-ja.com

モバイル用のhtml5ドラッグアンドドロップ

このコードをw3schoolsのドラッグアンドドロップで見つけました。これはデスクトップでは機能しますが、モバイルデバイスでは機能しません。

タッチを認識するために何を変更する必要がありますか？

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
javascriptjqueryhtmlmobiledrag-and-drop
13
SnowboardBruin

ほとんどのモバイルデバイスは、DOMにバインドされているドラッグイベントをリッスンしません。 touchmoveイベントとそれに伴うイベントを使用することをお勧めします。それは次のようになります：

オプション1

 <!DOCTYPE HTML>
 <html>
 <head>
 <style type="text/css">
       #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
 </style>
 </head>
 <body>

 <p>Drag the W3Schools image into the rectangle:</p>

 <div id="div1"></div>
 <br>
 <img id="drag1" src="img_logo.gif width="336" height="69">

 <script type="text/javascript">
  var el = document.getElementById('drag'); 

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleEnd, false);
  el.addEventListener("touchmove", handleMove, false);

  function handleStart(event) {
      // Handle the start of the touch
  }

  // ^ Do the same for the rest of the events

</script>
</body>
</html>

HandleStart、handleEndなどは、タッチイベントを処理できるイベントから発生するコールバックです。

タッチイベントまでの面倒な作業のすべてを実行したくない場合は、JQuery Touch Punchなどのライブラリをお勧めします。私はそれを使用しました、そしてそれはiOSで非常にうまく機能します。

自分のモバイルデバイスでそのパフォーマンスをテストできるライブラリへのリンクは次のとおりです。 http://touchpunch.furf.com/

OPTION 2（BETTER OPTION）JQuery Touchパンチは次のように含まれています：

ページにjQueryとjQuery UIを含めます。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

// Download this from the link above
<script src="jquery.ui.touch-punch.min.js"></script>

<script>
    $('#drag1').draggable();
    $( "#div1" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "isDropped" )
            .html( "Dropped!" );
        }
      });
    });

</script>
14
Alec Moore