javascript - Jquery ドラッグ可能なインサイドアウト コンテインメント

Question

ドラッグ可能な要素をその周りに含める代わりに、どうすればその中に入れることができますか? では、要素の端が要素内の要素と衝突しない限り、要素をどこにでもドラッグできますか?

Answer 1

小さな要素によって制約されているかのように、ドラッグ可能な要素を制限する実際の包含コンポーネントを作成することで、それを偽造することができます。次のように、実際のコンテナの寸法を作成する必要があります。

Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width

次に、ドラッグ可能な要素が移動したときに、含まれている制限要素が移動していないように見えるように、ドラッグ モーションに対抗する必要もあります。それまたは固定セクションのいずれかがフローティングdivになる可能性があります。

Answer 2

@RustyTheBoyRobotの回答に基づいて、ドラッグ可能なオブジェクトの寸法がわかっている場合は、CSSだけでも実行できます。

実例-jsbin.com/agovex

これの明らかな欠点は、これを複数の状況で再利用したい場合、値がCSSでハードコーディングされているため、機能しないことです。しかし、既知の寸法を持つ1つのものにのみ必要な場合、CSSはシンプルでエレガントなアプローチにすぎないと思います。ドラッグ可能なものを作成するためのJavaScriptは1行だけです。

Answer 3

他の誰かがこれに興味がある場合は、Rusty のコードとロジックを使用して、JSfiddle リンクを参照してください。