質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1417閲覧

jquery UIのDraggableの範囲指定に台形を使用したい

kittycut

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/16 06:33

現在、jQueryUIのdraggableを使ってオブジェクトをドラッグできるようにしています。
containmentも使用し、特定の範囲内で動くようにしています。
特定の範囲は、現状四角形なのですが、これを台形にしたいです。

実現したいこと

ドラッグできる移動範囲を台形にしたい

該当のソースコード

html

1<body> 2<div id="jquery-ui-draggable-wrap" class="ui-widget-content"> 3<div id="jquery-ui-draggable" class="ui-widget-content"> 4<div class="jquery-ui-draggable ob1"/> 5<div class="jquery-ui-draggable ob2"/> 6 7<script> 8 jQuery( function() { 9 jQuery('.jquery-ui-draggable') . draggable( { 10 containment: '#jquery-ui-draggable-wrap', 11 scroll: false, 12 } ); 13} ); 14</script> 15</body>

css

1#jquery-ui-draggable-wrap { 2 position: absolute; 3 width: 965px; 4 height: 550px; 5 top:110px; 6 left: 30px; 7 border-style: dashed; 8 z-index: 1; 9 overflow: visible; 10} 11.ob1 { 12 position: fixed; 13 top: 350px; 14 left: 580px; 15 width: 139px; 16 height: 92px; 17 background: url('../images/page1.png'); 18 background-repeat: no-repeat; 19} 20.ob2 { 21 position: fixed; 22 width: 139px; 23 height: 122px; 24 background: url('../images/page2.png'); 25 background-repeat: no-repeat; 26}

試したこと(やり方がよくなかったのかも)

・css上で::before/::afterを使い四角の左右上部に三角オブジェクトを配置してみたが、ドラッグできてしまう
・beforeなど使わず、他オブジェクトの回り込みを利用して範囲をせばめてみようとしたが、ドラッグできてしまう
・ob1とob2のpaddingで移動範囲をせばめることはできるが、台形にはせばめられない(四角くなる)
・現在の範囲のborderを使用して移動範囲をせばめようとしたが、台形にはせばめられない(四角くなる)

補足情報

現在、ドラッグ後の地点を取得するようなことは特にしていません。
できるだけシンプルに、移動範囲の形を変えるだけで実現できないかと考えています。

いろいろと検索したのですが見つけられなかったため、こちらに質問させていただきました。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ポリゴン描画ライブラリと組み合わせている例があったので台形にしてみました。

https://jsfiddle.net/y1o6gjaq/12/

投稿2018/02/16 07:26

naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kittycut

2018/02/16 07:56

naga3さん ご回答ありがとうございます。 台形にしていただいたリンクもありがとうございました! 再現しようとしたところ、コード内のawでひっかかってしまいました。 awについて、何かご存知であれば、おしえていただけると助かります。
kittycut

2018/02/16 08:04

早速ありがとうございます。 いただいたリンク先のjsをとりこんでみましたが、ドラッグが動きません。 現在→ <script src="js/Graph.js" type="text/javascript"></script> ちなみに動作確認はsafariです。 台形や中の丸は表示されますが、ドラッグが動かない状態です。
kittycut

2018/02/16 08:09

すみません!動きました! 最初から少し表記ミスをしていたみたいです。 実際の環境でも動くか試してみます。 ありがとうございました!
kittycut

2018/02/19 04:43

naga3さん たびたびすみません。 現在、実環境に移植しています。 いただいた台形リンクの丸印は位置座標を左上で取得されていると思うのですが、これを右下にすることは可能でしょうか?
kittycut

2018/02/20 01:40

ご回答ありがとうございます。 そんなシンプルな解決策があったんですね^^; 中心点を動かすことができました。 最後にもう1つだけ質問させていください。 今、台形の中に複数のオブジェクトを配置しています。 その中で1つだけ、台形の枠からはみださず、枠内だけで動かしたいものがあります。 中心点をずらす方法だとオブジェクトの左右どちらかが枠外にはみ出てしまうのですが、解決策はありますでしょうか?
naga3

2018/02/20 02:31 編集

厳密にやるならドラッグする図形の4頂点が台形に含まれるか計算しないといけませんが、 とりあえず台形の枠線を太くするくらいでも十分かなと https://jsfiddle.net/y1o6gjaq/61/
kittycut

2018/03/07 06:32

naga3さん ご返信が遅れまして大変失礼しました! 他作業のため、こちらに着手できていませんでした… 枠線を太くする方法、ありがとうございます! 教えていただいた枠線策ですが、実装してみたところ、全てのオブジェクトが枠内移動になってしまいました(マージン調整で枠外まで移動させられないかと思ったのですが、マージンにも制限があるのか、一定の数値以上は枠外に出ず…私のやり方が間違っていたのかもしれません…)。 オブジェクト1つだけを枠内に入れることはできますか? 念のため、現在のこちらの実装状況を簡単に作ってみました(↓でご覧いただけるでしょうか?) https://jsfiddle.net/kittycut/2frk0cc5/ ・実物大です。 ・シアンの台形とは別に実際の移動範囲はマゼンタで囲いました(なお、マゼンタ枠は今回わかりやすくするためだけのもので本来はありません。また、シアン部は最終的に透明になります)。 ・黄色っぽい長方形だけを、完全にマゼンタ枠内にだけとどめたいです!(現在はマゼンタ枠の左側に突き出してしまいます…)それ以外の赤・黒・灰色の動きは現在のままにさせておきたいです。 時間が空いてしまったため、大変恐縮なのですが、 可能であれば解決方を教えていただけると助かります><;
kittycut

2018/03/13 05:37

こちら解決いたしました! 具体的には、polygonをもう一つ作り、枠内におさめたいものだけ新しいpolygonの中で動くようにしました(まったく美しくないですが^^;)。 https://jsfiddle.net/kittycut/2frk0cc5/17/ 目標を達成できたのは、途中までアドバイスをいただいていたからです。 本当にありがとうございました。
guest

0

Draggableは矩形を前提としていてcontainmentの指定だけでどうにかすることはできません。
dragイベントで座標を制御することで三角形を実現している例がありました。
https://stackoverflow.com/questions/17856543/jquery-ui-draggable-within-a-triangle

投稿2018/02/16 06:59

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kittycut

2018/02/16 07:56

x_xさん ご回答ありがとうございました。 やはり、containmentだけでは無理なんですね。 既出の質問だったようで、リンクもありがとうございました。 いただいたリンクのものを再現しようと思ったのですが、エラーが返ってきて、ドラッグ要素が動きません。 jQuery.Deferred exception: Can't find variable: aw このawについて、何かご存知であれば、おしえていただけると助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問