Html5 要素に新しい属性、ドラッグ可能があり、このように使用されます。
http://www.w3.org/TR/2011/WD-html5-20110405/dnd.html
<div draggable="true">foo</div>
また、マウス イベントを引数とするイベント ondrag も受け入れます。
<div draggable="true" ondrag="drag(event)">foo</div>
私の質問は; JQuery のhttp://jqueryui.com/draggable/#constrain-movementのように、水平方向にのみドラッグできるように、ドラッグ境界を設定する方法はありますか。
JQuery を使用せずに..Javascript のみで..
HTML5 のドラッグ可能なインターフェースは、jQuery UI のドラッグ可能なインターフェースとはかなり異なります。その目的は、サンドボックス内で要素を移動できるようにすることではなく、視覚的なフィードバックを使用してデータを移動できるようにすることです。
jQuery draggable を使用して何かをドラッグすると、画面上の視覚的な変化に影響を与えます。要素のオフセットが変更されるため、新しい場所に表示されます。移動する場所と方法を制御できる多くのオプションがあります。html のドラッグ可能なプロパティは、既存のドラッグ アンド ドロップ メカニズムをより詳細に制御できるようにするために存在します。たとえば、テキストを強調表示して、テキストを入力できる場所にドラッグすると、テキストがコピーされます。また、画像をブラウザーからフォルダーにドラッグすると、画像がコピーされます。
ユーザーが画像をブラウザー画面からデスクトップにドラッグする場合にユーザーのマウスの動きを制限できないのと同じように、ユーザーが html プロパティを使用して何かをドラッグする場所を制御できるとは思えません。むしろ、このメカニズムにより、テキストや画像を超えてドラッグ アンド ドロップできるものを拡張できます。場合によっては、このメカニズムを完全に無効にすることもできますが、ユーザーがデータに対して行う決定を細かく制御することはできません。これは、完全に異なるアプリケーション間でのデータ転送を可能にする非常に高レベルのメカニズムであり、その動作を制御しすぎると、さまざまな状況で動作する能力が損なわれる可能性があります。