web-dev-qa-db-ja.com

グリッドスターの代替？

ドラッグアンドドロップのマルチカラムグリッドを使用するプロジェクトに Gridster ライブラリを使用しました。残念ながら、GridsterはInternet Explorer 9以降のみをサポートしています。 IE8を使用して同じことを行うことができ、可能であればIE7、およびIE6とも互換性がある、同様の使いやすいライブラリを見つける必要があります。

それで、古いIEのためのグリッドスターのようなライブラリはありますか？私はこのプロジェクトでjqueryを使用しているので、jqueryベースのライブラリも素晴らしいかもしれません。

追伸私は AnimaDrag と呼ばれるものを見つけましたが、それはグリッドスターほど良くなく、ちょっと悪いです。

javascriptjqueryanimationdrag-and-dropgrid
21
pmking

Shapeshiftもあります： https://github.com/McPants/jquery.shapeshift

そしてGridly： http://ksylvest.github.io/jquery-gridly/

これはグリッドスターの良い代替品です。 （ただし、Gridlyは四角いタイルのみを対象としています）

編集：Packeryも非常に興味深いです： http://packery.metafizzy.co/ 。ただし、それ以外の場合は商用プロジェクトの商用ライセンスが必要です。

非営利、個人、またはオープンソースのプロジェクトおよびアプリケーションの場合、GPL v3ライセンスの条件に基づいてPackeryを使用できます。

編集2：これも役に立つかもしれません： https://github.com/uberVU/grid

20
Jecimi

Gridstackを試してみることができます。 https://github.com/troolee/gridstack.js これは初期のバージョンですが、厳密にはgridsterに基づいており、応答性もあります。

14
Javier

[NB私は誰かが提起した同様の質問について、プロジェクトのgithubページにこの回答を投稿しました。この回答が修正された場合は、そこでチェックしてください！ -https://github.com/ducksboard/gridster.js/issues/74]

IE8のサポートのみが必要でしたが（IE7でも機能するようですが）、過去数日間、同様の問題を抱えて過ごしました。問題は、コードがページを正しく更新していることですが、IEは、マウスの移動中にデータ行とデータ列の変更を取得/評価しませんでした。解決策からいくつかのことを試しました上記では、modernizrや類似のライブラリを使用し、最後にIE 'propertychange'イベントのみにバインドしようとして成功していません。

IE8の制限のようで、マウスが押されている/動いている間、CSS属性を使用している要素を再評価しません。ただし、クラスとインラインの変更は検出されます（そのため、ボックスをドラッグできます）。

したがって、利用可能な時間で私が見つけた唯一の解決策は、jQuery .toggle（）を使用してウィジェットを更新する必要がある場合は常に、コードに偽のクラスを追加または削除することでした。そのため、プレビューとウィジェットに新しいdata-col＆data-row属性が渡されたときにコードに追加しました。これにより、IE8は変更を取得し、プレビューが機能するようになります。

今私はIE8を使用しない以外に（はるかに）より良い解決策があることを確信しています、それはIE8の互換性を保証しませんが、行き詰まっている場合、これが役立つかもしれません！

pS IE8 +についてのみ心配する必要がありました。modernizrや類似のプラグインを使用する場合、IE7は大丈夫なようです。しかし、IE6で試したことはありませんが、うまくいくとは思えません。

[編集]

以下のコメントに続いて、例にアップロードしました。ただし、IE8でJSFiddleを使用してNiceを再生することはできませんでした。したがって、代わりにIE8で動作する例を次に示します。

https://s3-eu-west-1.amazonaws.com/707074webfiles/gridster/ie8test.html

IE9.jsを含めました。これにより、このインスタンスのプレビューに（ほとんど）プレビューの透明効果が追加されます。

Gridster.jsファイルの変更されたコピーは次のとおりです。

https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js

ウィジェットのサイズ変更に関連する他の多くの変更が含まれています。ただし、IE8の変更のみが必要な場合は、IE8compatについて言及するためにIE8を検索するのが最善の方法だと思います。

執筆時点でie8の行の変更は次のとおりです。

  • 717：IE8互換性オプションを追加
  • 2054-2056：プレビューウィジェットに.toggleオプションを追加
  • 2433-2435：上に移動したウィジェットに.toggleオプションが追加されました
  • 2488-2490：下に移動したウィジェットに.toggleオプションを追加
5
Grozzer

これを見て反応のために何かを求めている人は、問題があまり修正されていないように見えるreact-grid-layoutがあります：

https://github.com/STRML/react-grid-layout

または反応キュレーター：

https://github.com/codetrove-development/react-curator

0
Fred Johnson

グリッドフィルのデータセット関数をシミュレートするためにポリフィルを試しましたか？ http://www.orangesoda.net/jquery.dataset.html が良い代替手段になるかもしれません。

0
Kaherdin

正解です。gridsterはInternet Explorer 9以降、Firefox、Chrome、Safari、Operaをサポートしています。
古いIEブラウザ（6+）をサポートする場合は、 jQuery draggable および jQuery droppable）の周りに機能を構築しないでください

0
Anshu