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

前提・実現したいこと

お世話になります。

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

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

該当のソースコード

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を使用してみました。
子要素の移動は出来たのですが、上下左右どの方向にも移動が出来さらに親要素からはみ出した部分がすべて表示された後お同じ方向に移動が出来てしまいました。
また、ドラッグでの移動ではなくクリック後マウスカーソル移動で子要素の移動再度クリックで移動解除の動きでした。

想定される解決方法

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

行動規範の内容に同意します

回答3件

「あるサイト」というのはこれですかね？翌日の記事でドラッグ版が出ていますが。
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

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

行動規範の内容に同意します

ベストアンサー

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

これは、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});