web-dev-qa-db-ja.com

jQueryUIドラッグアンドドロップに対するHTML5ドラッグアンドドロップの利点

ページ上の要素のドラッグアンドドロップ操作をサポートする必要がある新しいWebアプリケーションを作成しています(ファイルのドラッグアンドドロップではありません)。

これがこの質問への答えです

html5とjqueryのドラッグアンドドロップ

modernizrを使用して、ブラウザーがHTML5ドラッグアンドドロップをサポートしているかどうかを確認し、そのサポートを使用するか、jQueryUIなどの代替手段にフォールバックすることをお勧めします。

モデルがまったく異なるため、すべてのドラッグアンドドロップコードを個別に実装してテストする必要があります(共有実装はほとんどありません)。 HTML5のドラッグアンドドロップにユーザーに影響を与える重要な利点があり、jQuery UIへのフォールバックによってエクスペリエンスが低下する場合にのみ、これを行うのが論理的であるように思われます。

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

26
Eric J.

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

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

12
Steve Wellens

JQueryに対するHTML5ドラッグアンドドロップの最大の利点は、かなり大きなjQueryUIライブラリとcssファイルが不要になることだと思います。

そうは言っても、jQueryを非常に必要としているブラウザの互換性の現在の問題があります。

12
Todd Moses

両方を実装したので、mousedown/mousemoveイベントを使用して手動で実行することをお勧めします(基本的にjquery UIが実行するように)。

JQuery UIは少し重い可能性があることに同意しますが、自分でコーディングするために利用できるチュートリアル/コードスニペットはたくさんあります。

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

デスクトップからウィンドウ間で物事を移動することについて話している場合は、ブラウザ/ OSフックがあるのでhtml5DnDの使用を検討したいと思います。それ以外の場合、単一のWebページでDOMノードを移動するだけの場合は、jsマウスイベントを使用して手動で移動します。

-ポール

7

それはあなたが求めていたもののようですので、私は特にdndに関して答えています。 jQueryとjQueryUIを混同している人もいると思います。ネイティブHTML5dndをjQueryと一緒に使用することは、パフォーマンスと開発時間の両方で優れた組み合わせです。 dnd機能はIEの世界から来たので、ブラウザーのサポートは全面的にかなり良好です(IE7を含み、おそらくそれより古い)。jQueryを使用すると、すべてのクロスブラウザーaddClass()removeClass()などの重要なユーティリティ。

一方、jQueryUIには、おそらく必要のない機能がたくさんあります。彼らのdndはネイティブのdndではなくマウスイベントに依存しているため、パフォーマンスはそれほど良くありません。 jQueryUIをjQueryと混同しないでください。 jQueryUIは、2。5年以上にわたってメジャーアップデートを受け取っていません。 (はい、jQueryUI 1.8rc1は2010年1月にありました)したがって、将来ネイティブサポートを追加すると言うのはそれほど単純ではありません。彼らが更新しているペースで、私は息を止めません。

3
Danny C

1つのスクリプトをjQueryUIスクリプトの代わりにHTML5ベースのドラッグアンドドロップソート可能スクリプトを使用するように変換しました。これは、ソートしようとしたサイズで、jQueryUIバージョンの初期化に19秒、初期化に.19秒かかったためです。 HTML5バージョン。

だから利点:スピード

0
Kae Verens