問題タブ [gridster]

私は Gridster のドラッグ アンド ドロップのコンセプトが気に入っていますが、Meteor からのライブ アップデートに応じて変化する動的なタイル セットを持っています。たとえば、User モデルに Tiles 配列があるとします。Tiles 配列が Meteor によって更新されるとき、Tiles 配列に何が追加されたかを確認するのは困難です。同じコンテナで新しいタイルを使用して Gridster を再度呼び出す方法はありますか?

gridster.jsをJqueryUIと組み合わせて使用​​し、次のビットを使用してドラッグすることでサイズを変更できるようにしています。

GitHubで提案されているように：

http://jsfiddle.net/maxgalbu/UfyjW/

一般的にグリッドスターではなく、ウィジェットごとに最小の幅と高さを指定する必要があります。

この機能を実現するための明白な方法はありますか？

ありがとう

ここで基本的な Gridster.js デモをセットアップしました: http://jsfiddle.net/dvPaF/

私の目標は、イベントをドラッグする際の「応答性」を高めることです。現時点では、要素を指でドラッグしてから実際に要素を動かすまでにかなりの遅延があります。ただし、ドラッグが開始されると、遅延は消えます。

このイベントが発生するまでコードをデバッグしました。

最初は速く発砲しますが、2 回目は遅延があります。上記のイベントの距離ロジックをコメントアウトしました。

これをさまざまな Android デバイスでテストしています。

ドラッグ可能な要素をグリッドスターにドロップできるかどうか誰かが知っていますか？ http://gridster.net/#documentation

私の目的には素晴らしいようですが、ドロップしてグリッドに追加できますか？

画像をグリッドスターにドラッグしたい。可能ですか？これのサンプルを見ることができますか？

これが不可能な場合、代替案を知っていますか？

画像をdiv内の個別の場所にドラッグして、位置を保存したり、キャンバス内で画像を移動したりできるようにする必要があります。

私は Gridster ( http://gridster.net/ ) を使用しており、コンテンツを 内にドラッグできますli。私のli中にはクリック可能なdivがあります。

だからここに私が直面している問題があります.ドラッグを停止して解放すると、divでクリックが呼び出されます.divをドラッグするだけで、ドラッグを停止して解放した後にクリックを呼び出すことはできません. ドラッグ後に別のページにリダイレクトしたくありません（ユーザーがドラッグして離す..ドラッグするときはdivをクリックする必要があるため、divをクリックできるため、ドラッグを停止して離すとクリックが呼び出されます）

または、誰でも gridster が提供する関数を呼び出す方法または使用する方法についてヒントを与えることができます

draggable.stop: function(event, ui){} ドラッグが停止したときのコールバック。

ここで何らかの実装が行われると思います。

初期の解決策ですが、まだ機能していません

Gridsterを使用すると、ドラッグの開始時と停止時にイベントをバインドできます。しかし、どうすればイベントをアイテムのシングルクリックにバインドできますか？アイテムを削除したり、いくつかのプロパティを設定したりするには、アイテムを選択できる必要があります。

jQuery Drag & Drop ライブラリであるGridsterを使用しようとしています。ただし、私の HTML は、この JSFiddle ( http://jsfiddle.net/twashing/4xc6s/5/ ) のような構造になっています。そして、グリッドスターを動作させることができません。つまり、ドラッグ アンド ドロップの動作は発生しません。

私の HTML 構造には、順序付けられていないリスト (ul > li) のリスト項目ではなく、div があります。i)ドラッグ可能にしたいのは .section-box クラスで、互いに置き換えます。Gridster でこれを行うにはどうすればよいですか?

ii)それを除けば、可能であれば、テーブル行 ( tr ) 要素、つまりドラッグ可能な要素を作成することもできます。

JSFiddle: http://jsfiddle.net/twashing/4xc6s/5/

HTML

Javaスクリプト

ありがとう

これが問題を示すjsfiddleです：http：//jsfiddle.net/FQxYB/9/

「フィドルにリンクしないでください」というエラーの投稿を避けるために、フィドルの詳細を以下に示します（スタックオーバーフローによってこれを自動的に実行できないのはなぜですか？）。

フィドルHTML：

フィドルコード：

フィドルCSS：

フィドルリソース： http： //gridster.net/dist/jquery.gridster.js

2番目の正方形（下の正方形）では、LIの境界を超えないように下のdivが必要です。

大まかに言えば、「ヘッダー」divのコンテンツは任意のサイズにすることができます（ヘッダーのコンテンツはコンテキストによって異なります）。ただし、「body」divのコンテンツは、必要に応じてスクロールバーを表示し、LIの範囲内にとどまる必要があります。

私は「海のように迷子になっている」。私はさまざまなスキームを試しましたが、どれも近づいていません（ほとんどの場合、divをdisplayでラッピングするバリエーション：table / table-row / table-cell）。

助けてくれてありがとう！

gridster の標準的な使用法は、ドラッグ操作が開始されることを示すためにオブジェクト全体に触れることができるものであるようです。そのタッチ可能な領域をオブジェクト内の特定の領域 (div) に制限することは可能ですか? おそらく何らかのアイコンで示されますか? 他の（マウスに敏感な）ものを含むオブジェクトでgridsterを使用できるようにしたいのですが、ユーザー（gridsterに沿って:)が何が起こるべきかについて混乱することは望ましくありません。何かご意見は？

jQueryプラグインGridsterを使用しています。

新しいウィジェットを追加するadd_widgetボタンを作成しました。このウィジェットは、再度削除することもできます。

これはすべて正しく機能しています。ただし、ヘッダーをクリックすると、スライドボックスがトリガーされます。ただし、このスライドボックスは、新しく追加されたウィジェットでは機能せず、最初から存在していたウィジェットでのみ機能します。

ヘルプ！！！！

このフィドルを参照してください：http： //jsfiddle.net/ygAV2/

私は疑う：

アドボックス部分

とスライディングボックス部分：