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

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

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

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

CSS

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

Q&A

解決済

3回答

6053閲覧

ドラッグで要素を横移動したい

sakio6

総合スコア47

jQuery

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

CSS

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

0グッド

1クリップ

投稿2020/02/13 04:34

前提・実現したいこと

お世話になります。

親要素からはみ出した子要素をドラッグで横移動をし、はみ出ている部分を任意で見れるようにしたいです。
また、上下の移動は出来ないとし、横移動は左右とも親要素からはみ出した分だけ可能でそれ以上は横移動できないように制御したいと思います。

・親要素は画面幅いっぱいになっています。
・レスポンシブサイトです。

該当のソースコード

HTML

1<div class="main-area"> 2 <div> 3 <img src="../cmn_resort/img/top_main_pc.jpg" alt=""/> 4 </div> 5</div>

CSS

1.main-area { 2 width: 100%; 3 overflow: hidden; 4 position: relative; 5 padding: 49.5% 0 0 0; 6} 7 8.main-area div { 9 position: absolute; 10 z-index: 11; 11 top: 0; 12 left: 0; 13 width: 147%; 14} 15 16.main-area div img { 17 width: 100%; 18 height: auto; 19}

jQery

1$(window).on('load', function() { 2 3 var drag_flg = false; 4 5 var pos1; 6 var pos2; 7 8 var posX1; 9 var posY1; 10 11 $('.main-area div').mousedown(function(evt1) { 12 13 if(drag_flg == false) { 14 15 pos1 = $('.main-area div').position(); 16 17 posX1 = evt1.clientX - pos1.left; 18 posY1 = evt1.clientY - pos1.top; 19 20 drag_flg = true; 21 22 } else if(drag_flg == true) { 23 24 drag_flg = false; 25 } 26 }); 27 28 $('.main-area div').mouseup(function() { 29 30 drag_flg = false; 31 }); 32 33 $(document).mousemove(function(evt2) { 34 35 if(drag_flg == true) { 36 37 $('.main-area div').css("left",(evt2.clientX - posX1)); 38 $('.main-area div').css("top",(evt2.clientY - posY1)); 39 } 40 }); 41 42 43});

試したこと

あるサイトを参考に上記のjQeryを使用してみました。
子要素の移動は出来たのですが、上下左右どの方向にも移動が出来さらに親要素からはみ出した部分がすべて表示された後お同じ方向に移動が出来てしまいました。
また、ドラッグでの移動ではなくクリック後マウスカーソル移動で子要素の移動再度クリックで移動解除の動きでした。

想定される解決方法

ページ読み込み時やリサイズ時、子要素移動後に画面の幅とはみ出している子要素の幅を取得し、
子要素幅数値から画面幅数値を引いた残りの数値分のみ移動できるよう指定できれば良いのかなと考えていましたが具体的な方法が思いつきませんでしたので、ぜひ教示頂けまでしょうか。
また、上記方法がまったくの検討違いでしたらご指摘頂けますと幸いです。

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

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

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

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

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

guest

回答3

0

「あるサイト」というのはこれですかね? 翌日の記事でドラッグ版が出ていますが。
http://javascript-style.hatenablog.com/entry/2019/03/08/080000

画面いっぱい使うのであれば、画面外でマウスボタンを離すことが考えられ、mouseup では使い勝手が悪くなります。.setPointerCapture() を使ったほうがいいでしょう。
https://developer.mozilla.org/ja/docs/Web/API/Element/setPointerCapture

移動制限は座標の制限です。考えてみてください。
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientX

投稿2020/02/13 05:57

x_x

総合スコア13749

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

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

sakio6

2020/02/13 07:20

ご回答いただきありがとうございます。 「あるサイト」はおっしゃる通りで御座います。別の記事に正解に近いのがあったのですね確認不足でした。 参考になるサイトご紹介ありがとうございます。今後も必要になりそうな内容なので勉強していきたいと思います。
guest

0

ベストアンサー

ドラッグでの移動ではなくクリック後マウスカーソル移動で子要素の移動再度クリックで移動解除の動きでした。

これは、imgのドラッグが発生するので、.main-area divのドラッグがキャンセルされるのが原因と思われます。draggable="false"でimgをドラッグ禁止にすればいいでしょう。

html

1 <img draggable="false" src="https://hatena19.com/wp-content/uploads/2019/07/measuring_tape_fruits.jpg" alt=""/>

上下の移動は出来ないとし、横移動は左右とも親要素からはみ出した分だけ可能でそれ以上は横移動できないように制御したいと思います。

縦移動禁止は、縦移動のコードを削除すればいいでしょう。
左右移動の制限は、マウスクリック時にはみ出している長さを取得して、それで制限すればいいでしょう。

js

1$(window).on('load', function() { 2 3 var drag_flg = false; 4 var posX1; 5 var minLeft; 6 7 $('.main-area div').mousedown(function(evt1) { 8 var pos1; 9 if(drag_flg == false) { 10 pos1 = $('.main-area div').position(); 11 posX1 = evt1.clientX - pos1.left; 12 minLeft = $('.main-area').width() - $('.main-area div').width(); 13 drag_flg = true; 14 } 15 }); 16 17 $('.main-area div').mouseup(function() { 18 drag_flg = false; 19 }); 20 21 $(document).mousemove(function(evt2) { 22 if(drag_flg == true) { 23 var posX = evt2.clientX - posX1; 24 if (posX > 0){posX = 0}; 25 if (posX < minLeft){posX = minLeft}; 26 $('.main-area div').css("left", (posX)); 27 } 28 }); 29});

投稿2020/02/13 05:54

hatena19

総合スコア33620

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

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

sakio6

2020/02/13 07:15

ご回答いただきありがとうございます。PCでは希望の動きが確認出来ました。ただスマホでは動かないため「touchstart」などを追加してスマホでも動作するようにしてみたのですが全く反応しませんでした。大変お手数でございますがスマホでも動作するための方法もご教示頂けますでしょうか。
sakio6

2020/02/19 06:01

お返事遅くなりました。 参考サイトありがとうございます。無事に希望の動きを実現することが出来ました。 まだまだ分からないことだらけなので、他の内容でのご質問もする機会があると思います。 その際タイミングが合いましたらまた宜しくお願い致します。
guest

0

drag処理はjQuery-uiでaxisを指定すると楽です

投稿2020/02/13 05:51

yambejp

総合スコア114572

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

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

sakio6

2020/02/13 07:17

ご回答いただきありがとうございます。 jQuery-uiも初め調べてみたのですが勉強不足の自分では理解不足で今回外してしまいました。今後の事も考えてjQuery-uiも勉強してみたいと思います。
yambejp

2020/02/13 07:19

参考でつけてるcodepenは見ていただいていますよね? $(セレクタ).draggable({ axis: "x" }); だけで実現できるので一度ためしてみてください
sakio6

2020/02/19 06:03

お返事遅くなりました。 jQuery-uiで横の動き簡単ですね。 ただ、左右の動ける範囲が決まっていてその制御方法が分からず自分の知識不足を痛感しました。 これからも勉強を続けていきたいと思います。 ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問