2012-03-01 28 views
26

ドラッグアンドドロップ操作をサポートする必要がある(ファイルのドラッグアンドドロップではなく)ページ上の要素に対するサポートが必要な新しいWebアプリケーションを作成しています。この質問HTML 5の利点jQuery UIのドラッグアンドドロップでドラッグ&ドロップ

html5 vs jquery drag and drop

この回答は、ブラウザがサポートしたり、jQueryのUIのような代替にフォールバックHTML5のドラッグ&ドロップのいずれかの使用をサポートしているかどうかを確認するためにModernizrを使用することをお勧めします。

モデルが非常に異なるため、すべてのドラッグアンドドロップコードを個別に実装してテストする必要があります(共有実装はほとんどありません)。 HTML5のドラッグ・アンド・ドロップに大きな影響を与え、jQuery UIのフォールバックが低下した経験を提供するのであれば、それを行うことは理にかなっているようです。

両方のバリアントを実装することに大きな利点がありますか?

+0

なぜ近い投票ですか? HTML5のドラッグアンドドロップには、二重の実装を提供することが妥当でないことに気づいていないという利点があるかどうかを知ることは合理的です。正当な質問でない場合は、理由を教えてください。 –

+0

Eric:私にはあなたが何の答えをしたのかははっきりしない。それは、「賛否両論は何ですか?」または「私は自分のプロジェクトに何を使うべきか」という質問の1つです。 HTML5のドラッグアンドドロップはクロスブラウザではなく、jsの実装にフォールバックする方法を知っています - ここでの技術的な質問は何ですか?私はそれを見逃しているかもしれないと認めます。 –

+0

@Madmartigan:いいえ、HTML5のドラッグアンドドロップがjQuery UIのドラッグアンドドロップより優れているかどうかを尋ねています。私はすべてのブラウザがHTML5をサポートしているわけではないので、jQueryバージョンを実装する必要があることを知っています。私が気づいていないHTML5バージョンには、jQuery UIの開発の最前線で追加の開発努力が必要であるという利点(より速く、よりスムーズなもの)私がネット上で見た答えは、 "両方とも"であるように見えますが、それは私が現在知っていることを与えてくれても意味がありません。 –

答えて

12

jQueryは、html 5のドラッグアンドドロップのような組み込みのブラウザ機能を利用すると思います。

異なるブラウザで異なる実装をしている場合は... jQueryが処理します。

+0

落札して申し訳ありませんが、** jQuery-ui **と** jQuery **ではないと思います。 http://wiki.jqueryui.com/w/page/12137878/Draggable – jozecuervo

12

jQueryに比べてHTML5ドラッグアンドドロップの最大の利点は、かなりのjQuery UIライブラリとCSSファイルがなくなったことです。

言われているように、jQueryを非常に必要とするブラウザ互換性の問題があります。

+2

それは良い点です。 –

+0

スピードも。 jQueryのUIは、ページ上にたくさんのdraggablesがあり、かなり遅いです。 HTML5 dndに切り替えた後、ページはより速く応答しました。しかし、HTML5 dnd APIはjQUIに比べて奇妙で欠けています。( – Alex

3

私は具体的にdndに関して答えています。それはあなたが求めていたようだからです。 jQueryUIとjQueryを混同している人がいると思います。ネイティブのHTML5 dndをjQueryと共に使用することは、パフォーマンスと開発の両面で素晴らしい組み合わせです。 dndの機能はIEの世界から来ているので、ブラウザのサポートは全面的にかなり良い(IE7、確かに古いものを含む)。 jQueryを使用すると、すべてのクロスブラウザaddClass()removeClass()などが提供されます。これらのユーティリティは非常に重要です。

jQueryUIは、多分あなたが必要としないたくさんの機能を提供しています。彼らのdndはマウスイベントに依存し、ネイティブdndに依存しないので、パフォーマンスはそれほど良好ではありません。 jQueryUIをjQueryと混同しないでください。 jQueryUIは2.5年以上もの間に大きなアップデートを受けていません! (はい、jQueryUI 1.8rc1は2010年1月にリリースされました)今後のネイティブサポートを追加するというだけでなく、更新しているペースで私は息を止めません。

7

両方を実装していれば、mousedown/mousemoveイベント(基本的にはjquery UIのように)で手動で行うことをおすすめします。

jQuery UIは少し重くてもかまいませんが、自分でコード化できるチュートリアル/コードスニペットがたくさんあります。

現代のブラウザではネイティブ実装ではなく手動アプローチを推奨するのはなぜですか?だからhtml5 DnD sux!現在のブラウザでは新しいかもしれませんが、IE5の古い実装の後にモデル化されています。

ウィンドウ間をデスクトップから移動することについて話しているのなら、html5 DnDをブラウザ/ OSフックとして使用することを検討したいと思うかもしれません。それ以外の場合は、単一のWebページ上でDOMノードを移動するだけの場合は、jsマウスイベントを使用して手動で行います。私は並べ替えしようとしていたものの大きさと、それを初期化するために19秒かかったので

-Paul

+11

それは技術的な言葉に翻訳できますか? –

+0

技術的にはhtml5 dndはひどい実装をしていますが、私はhtml5ドラッグアンドドロップsuxのためのGoogleを検索します。[OK]を、最初の2つの結果がここにあります:http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.htmlとhttp://pxdraw.com /HTML5DragAndDropSucks.com/#slide12 –

+2

個人的には、自分の実装を開始して後悔してしまう前に、既に最初のリンクを読んでいたので、他の開発者に一緒にハッキングの苦痛を救うためにここに投稿しています。 PKKの動機も確信していましたが、これを読んで、HTML5 DnDをまだ実装している皆さんのように、私は難しいと思っています:) –

0

私はちょうど、代わりにjQueryUIの一つでソート可能なスクリプトをドロップ/ HTML5ベースのドラッグを使用する1つのスクリプトに変換しましたjQueryUIバージョン、HTML5バージョンを初期化する.19秒。

利点:速度

関連する問題