HTML5のネイティブドラッグアンドドロップを使用する場合の移動を制限する方法はありますか？

jQuery UIなどのさまざまなJavaScriptライブラリでは、ドラッグされた要素のconstrain the movementを単一軸または特定の領域にドラッグ＆ドロップすることができます。HTML5のネイティブドラッグアンドドロップを使用する場合の移動を制限する方法はありますか？

ネイティブのHTML5 drag and drop APIを使用すると、このようなことは可能ですか？

出典

2012-01-31 callum

w3schoolsへのリンクは重罪とみなされます。 – artistoex

[HTML5：X軸上にドラッグ＆ドロップするとフェードが発生しませんか？]（http://stackoverflow.com/questions/8933513/html5-drag-drop-on-x-axis-and-without-fade） – SiliconMind

私はこれが古い投稿だと知っています...しかし、私は 'dragstart'でクローン要素を作成し、元を隠し、' dragover'イベントでクローンの位置を設定することで解決しました。 'mousemove'とほとんど変わりません。それはドラッグアンドドロップを完全に書き換えるよりも簡単でした。私は多くの人が持っていると確信しています。 – mseifert

これはまったく異なります。 jQuery UIのドラッグアンドドロップで、要素の移動（上部および左のCSSプロパティを使用）がページに表示されます。

ネイティブのHTML5ドラッグアンドドロップAPIは、ドラッグ可能な要素の「ゴースト」を移動することしかできません（もちろん、ゴーストをドラッグしている間は元の要素を隠すことができます）。

APIにはa lot of eventが付いていますが、マウスの位置を制約することはできませんので、1軸に制限することはできません（マウスがページを離れる場合でもマウスの位置に従います停止操作））。

出典

2014-11-14 10:29:07 Jordan

+1、W3SchoolsからMDNへのリンクを更新し、これが質問のトピックにならないようにしました。 –

私はW3schoolsにリンクしていません。それは私の質問を編集した人です。このサイトは不景気です。 – callum

HTML5のネイティブドラッグアンドドロップを使用する場合の移動を制限する方法はありますか？

答えて

関連する問題