問題タブ [draggable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
3 に答える
732 参照

user-interface - 物理的な動作を伴うドラッグ アンド ドロップ

ユーザーがワークスペース内でオブジェクトをドラッグできるドラッグ機能を実装したいと考えています。もちろん、それは簡単なことです。難しいのは、トルクモーメントによる回転を組み込んだ、物理的に正しいドラッグにすることです (1 本の指だけを使ってテーブルの上で本をドラッグすることを想像してみてください。ドラッグするとどのように回転しますか?)。

これをコーディングする方法についての説明をどこで見つけることができるか知っている人はいますか (2D のみ、長方形のみ、摩擦は必要ありません)。

大変お世話になりました、デビッド


編集:

私が探しているものを言葉よりもはるかにうまく伝えることを願って、小さなアプリ (明らかに間違った動作をしています) を書きました。C# (VS 2008) ソースとコンパイル済みの exe はこちら


編集2:

サンプル プロジェクトを調整して、許容できる動作を実現しました。新しいソース (およびコンパイル済みの exe) は、こちらから入手できます。C# 2008 で書かれています。私はこのコードを著作権なしで提供します。自由に使用/変更/何でもしてください。私に知らせたり、私に言及したりする必要はありません。

0 投票する
1 に答える
1169 参照

jquery - y軸制限のあるjQueryのドラッグ可能なクローン

このマークアップがある場合:

そして、このjQueryコード:

最初の列をドラッグすると、複製されたスパンが最初の列ではなく 2 番目の列にスナップされます。内側のスパンではなく表のセルをドラッグしようとすると、表の外側にスナップします。axis:'y' を削除すると、必要な Y 軸の制限がなくなったことを除いて、期待どおりに機能します。何か案は?ありがとう。

0 投票する
4 に答える
29463 参照

javascript - ドラッグ可能なオブジェクトの境界制限の設定

私には2つの要素があります:

1.固定高さの親、overflow:hidden

2.固定高さが大きいその子。

親div内でリストを上下にドラッグできるようにしたい。jquery uiドラッグ可能プラグインを使用して頂点ドラッグを実現していますが、親div内でリストを制約する方法がわかりません。

リストのポスションのバーティクルの上限と下限を設定するにはどうすればよいですか?

0 投票する
5 に答える
33559 参照

jquery - 固定X軸とY軸でjQueryをドラッグ可能にする方法は?

jQueryをドラッグ可能にして、上下左右にまっすぐドラッグする方法があるかどうか疑問に思っています。ユーザーが div を斜めにドラッグできないようにしたい。私の状況では、ドラッグ可能な UI でグリッド オプションを使用することはできません。

http://jqueryui.com/demos/draggable/#constrain-movement

これはどのように可能ですか?

ありがとう!

0 投票する
1 に答える
748 参照

jquery - mootoolssortablesとjquerysortablesの効果

私はしばらくの間mootoolsを使用していて、jQueryを1週間試しているので、これはおそらく初心者の質問です-マニュアルには何も見つかりませんでした。

mootoolsでは、並べ替え可能なリストでオプションcloneを使用すると、画像/オブジェクトのクローンが作成され、画像/オブジェクトがドロップされる場所を視覚化できます。これは、サムネイルの並べ替えシステムでうまく機能します。

mootoolssortablesのドキュメントページ

ええと、jQueryにも同じオプションであるcloneがありますが、私が使用しても何も起こりません。つまり、実際には要素のクローンを作成し、ドラッグしたものはクローンですが、ドロップすると、元の要素は以前の場所に正確に残ります。この動作は、サイトにあるドラッグ可能なデモで確認できます。半透明のクローンを見てください。移動することができ、ドロップしてもそこにとどまります。

これはバグのある動作ですか、それともどうあるべきですか?私は自分でmootoolsの振る舞いを複製することができましたが、これは標準的なオプションですが...

前もって感謝します!

0 投票する
2 に答える
18594 参照

jquery - jQueryドラッグ可能を使用して、divクリッピングマスク内でズーム画像をドラッグしますか?

ユーザーが画像をズームインし、ズームされたバージョンをクリッピング マスク div 内でドラッグできるようにするインターフェイスを作成しています。

200px by 200pxoverflow: hidden を設定した divがあります。次に、 std img ( <img src="etc">) を divにロードし1000px by 1000pxます。

次に、jQueryを使用します

数字はハードコードされています。これまでのところ、試行錯誤でしか見つけることができません...

問題は、ページを変更するたびに (コンテナ div の上に別の要素を挿入するなど)、ページ サイズが変更され、ハード コードされた [x1, y1, x2, y2] が正しく機能しなくなることです。

主な問題は、[x1、y1、x2、y2] を完全に理解していないことです...

これに関するjQueryドキュメントは次のとおりです。

x1 がドラッグ可能な最も左のポイントであり、x2 がドラッグ可能な最も右のポイントであると考えるのは正しいですか? (y1とy2も同じ)?

もしそうなら、それらを動的に計算するための最良の戦略は何ですか?

また、「ズームされた画像をdivクリッピングマスク内にドラッグする」という主な問題に対する他の迅速かつ簡単な解決策は大歓迎です。

0 投票する
2 に答える
3411 参照

jquery-ui - 並べ替え可能なjQueryiframeFix

私のCMSには、サムネイルのリストがあります(Sortable)。サムネイルはうまく機能し、今私はそれらをtinyMCEウィンドウにドラッグするプラグインを書いています。

tinyMCEウィンドウにはiFrameがあるため、うまく機能しません。

jQueryには、iframeFixと呼ばれるDraggablesのオプションがあり、必要に応じて正確に機能します。ただし、そのリストは並べ替え可能である必要があります。私はグーグルをかなり広範囲に調べましたが、私の要件を持っている人は誰も見つかりませんでした。StackOverflowの誰かがそれをしましたか?

iframeFixをSortablesに適用しますか?

そうでない場合は...jQueryプラグインに向かっています。

前もって感謝します!

0 投票する
2 に答える
5149 参照

jquery - jQuery のドラッグ可能なテキスト選択のバグ

これがバグかどうかはわかりませんが、この例では、ドラッグできる要素の下にあるテキストを選択する方法がありません。

フォーム要素と同じ問題。

http://jqueryui.com/demos/draggable/handle.html

何か案は?

0 投票する
2 に答える
559 参照

jquery - jqueryドラッグ可能からソート可能

新しいアイテムを追加するために、並べ替え可能なリストとドラッグ可能なアイテムを作成しました。

ドラッグ可能なアイテムから新しいアイテムを追加するときに表示したい削除ボタンがあります。

イベントを接続するにはどうすればよいですか?

これは、ドラッグ可能からソート可能にドラッグされる要素です。

0 投票する
4 に答える
461 参照

html - ドラッグ可能な div - ポイントは何ですか?

jQuery、.Net Ajax、および単純な古い JavaScript で、ドラッグ可能な div の多くの実装を見てきました。それらはすべて斬新で、さまざまな容易さで問題を解決しますが、私はポイントが何であるかを理解していません.

ドラッグ可能なdivの値は何ですか? ドラッグ可能な div はどのようなユース ケースを実装しますか?

ドラッグ可能な div によってユーザー エクスペリエンスが向上する場所はありますか、それとも Web 2.0 バージョンの<blink>タグですか?