Q&A
mouseenter とかはすでにお試しになられましたか？
実現したいこと
ドラッグ対象のボタンが#line1の上にいるときにはconsole.log('#line1');
ドラッグ対象のボタンが#line2の上にいるときにはconsole.log('#line2');
ドラッグ対象のボタンが#line3の上にいるときにはconsole.log('#line3');
ドラッグ対象のボタンが#line4の上にいるときにはconsole.log('#line4');
としたいのですが、どのオプションやイベントを使えば実装できるのかがわかりません。
また、positionのleftの値で条件分岐も考えましたが、単位はpxだと思うのでレスポンシブに対応できないと思いますが、%単位にすることは可能でしょうか？
vscodeで書いています。
どなたかご教示ください。よろしくお願いします。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 9<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 10<!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> --> 11 <title>Document</title> 12 <style> 13 14 15 .dragimg{ 16 display: flex; 17 } 18 19 .e-n-tabs-heading{ 20 display: flex; 21 justify-content: center; 22 } 23 24 25 .e-n-tabs-heading .e-n-tab-title{ 26 width:20%; 27 } 28 29 .parent_box img{ 30 width:100%; 31 } 32 33 .flow_sliderbutton1 { 34 width: 40px; 35 height: 40px; 36 border-radius: 50%; 37 background-color: #019C9C; 38 border: 7px solid #D6E7F3; 39 margin-top: -2rem; 40} 41 42.line2_body{ 43 width:100%; 44} 45.line{ 46 border-top:1rem solid red; 47 margin-top: 2rem; 48} 49 50.line1{ 51 border-top:1rem solid red; 52 margin-top: 2rem; 53 width:25%; 54} 55 56.line2{ 57 border-top:1rem solid rgb(0, 255, 55); 58 margin-top: 2rem; 59 width:25%; 60} 61 62.line3{ 63 border-top:1rem solid rgb(26, 70, 136); 64 margin-top: 2rem; 65 width:25%; 66} 67 68.line4{ 69 border-top:1rem solid rgb(204, 72, 116); 70 margin-top: 2rem; 71 width:25%; 72} 73.line2_flex{ 74 display: flex; 75} 76 </style> 77 78</head> 79<body> 80 81 82 <div class="e-n-tabs-heading" role="tablist"> 83 <div id="e-n-tabs-title-1321" class="e-n-tab-title e-normal e-active" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-1321" aria-expanded="true"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/01.png" class="number_right"></figure><p class="p_text_box2">ヒアリング・見積もり</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-13.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1322" class="e-n-tab-title e-normal" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1322" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/02.png" class="number_right"></figure><p class="p_text_box2">内容提案</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-15.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1323" class="e-n-tab-title e-normal" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1323" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/03.png" class="number_right"></figure><p class="p_text_box2">デザイン制作</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-16.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1324" class="e-n-tab-title e-normal" aria-selected="false" data-tab="4" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1324" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"> <div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/04.png" class="number_right"></figure><p class="p_text_box2">サイト公開</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-17.png" alt="" width="340" height="219"></div></div></span></div> </div> 84 85 <div class="line2_body"> 86 <div class="line2_flex" id="line2_flex"> 87 <div id="line1" class="line line1"></div> 88 <div id="line2" class="line line2"></div> 89 <div id="line3" class="line line3"></div> 90 <div id="line4" class="line line4"></div> 91 </div> 92 <div class="flow_sliderbutton1"></div> 93 </div> 94 <script> 95 $(function() { 96 97 $('.flow_sliderbutton1').draggable({ 98 axis: "x", 99 containment: '#line2_flex', 100stop: function(e, ui) { 101alert(' top: ' + ui.position.top + ' left: ' + ui.position.left); 102} 103}); 104 105}); 106 107 108 </script> 109</body> 110</html>
試したこと
/* ドラッグ可能なターゲット上で発生するイベント */
var line1 = document.getElementById("line1");
line1.addEventListener("drag", (event) => {
console.log("line1");
});
↑このようなものを追記して試しましたが全く反応しませんでした
コメントありがとうございます。
javascriptで何とかならないかと思い、https://naruhodo.repop.jp/javascript-drag-drop-event/
を参考にソースコードを以下のように変えました。
```index4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<title>Document</title>
<style>
.dragimg{
display: flex;
}
.e-n-tabs-heading{
display: flex;
justify-content: center;
}
/* .dragimg div {
width:20%;
} */
.e-n-tabs-heading .e-n-tab-title{
width:20%;
}
.parent_box img{
width:100%;
}
.flow_sliderbutton1 {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #019C9C;
border: 7px solid #D6E7F3;
margin-top: -2rem;
}
.line2_body{
width:100%;
}
.line{
border-top:1rem solid red;
margin-top: 2rem;
}
.line1{
border-top:1rem solid red;
margin-top: 2rem;
width:25%;
}
.line2{
border-top:1rem solid rgb(0, 255, 55);
margin-top: 2rem;
width:25%;
}
.line3{
border-top:1rem solid rgb(26, 70, 136);
margin-top: 2rem;
width:25%;
}
.line4{
border-top:1rem solid rgb(204, 72, 116);
margin-top: 2rem;
width:25%;
}
.line2_flex{
display: flex;
}
</style>
</head>
<body>
<div class="e-n-tabs-heading" role="tablist">
<div id="e-n-tabs-title-1321" class="e-n-tab-title e-normal e-active" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-1321" aria-expanded="true"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/01.png" class="number_right"></figure><p class="p_text_box2">ヒアリング・見積もり</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-13.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1322" class="e-n-tab-title e-normal" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1322" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/02.png" class="number_right"></figure><p class="p_text_box2">内容提案</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-15.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1323" class="e-n-tab-title e-normal" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1323" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/03.png" class="number_right"></figure><p class="p_text_box2">デザイン制作</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-16.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1324" class="e-n-tab-title e-normal" aria-selected="false" data-tab="4" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1324" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"> <div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/04.png" class="number_right"></figure><p class="p_text_box2">サイト公開</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-17.png" alt="" width="340" height="219"></div></div></span></div> </div>
<div class="line2_body">
<div class="line2_flex" id="line2_flex">
<div id="line1" class="line line1"><div class="flow_sliderbutton1" id="target" draggable="true"></div></div>
<div id="line2" class="line line2"></div>
<div id="line3" class="line line3"></div>
<div id="line4" class="line line4"></div>
</div>
</div>
<script>
//ドラッグできる要素
const target = document.getElementById('target');
//ドロップ可能エリア
const dropArea1 = document.getElementById('line1');
const dropArea2 = document.getElementById('line2');
const dropArea3 = document.getElementById('line3');
const dropArea4 = document.getElementById('line4');
//ドラッグが開始された時
target.addEventListener('dragstart', () => {
//このサンプルでは未使用
}, false);
//ドラッグ中の時
target.addEventListener('drag', () => {
//targetを非表示にする
target.style.display = `none`;
}, false);
//ドラッグが終了した時
target.addEventListener('dragend', () => {
//targetを表示にする
target.style.display = `flex`;
}, false);
//ドロップ可能エリアに入った時
dropArea1.addEventListener('dragenter', () => {
//dropAreaに背景色を付けてわかりやすくする
dropArea1.style.background = "#E0E0E0";
console.log('dropArea1');
}, false);
dropArea2.addEventListener('dragenter', () => {
//dropAreaに背景色を付けてわかりやすくする
dropArea1.style.background = "#E0E0E0";
console.log('dropArea2');
}, false);
dropArea3.addEventListener('dragenter', () => {
//dropAreaに背景色を付けてわかりやすくする
dropArea1.style.background = "#E0E0E0";
console.log('dropArea3');
}, false);
dropArea4.addEventListener('dragenter', () => {
//dropAreaに背景色を付けてわかりやすくする
dropArea1.style.background = "#E0E0E0";
console.log('dropArea4');
}, false);
//ドロップ可能エリア上にある時
dropArea1.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea2.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea3.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea4.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
//ドロップ可能エリアでドロップされた時
dropArea1.addEventListener('drop', () => {
//targetのHTMLをdropArear1に追加
dropArea1.appendChild(target);
}, false);
dropArea2.addEventListener('drop', () => {
//targetのHTMLをdropArear1に追加
dropArea2.appendChild(target);
}, false);
dropArea3.addEventListener('drop', () => {
//targetのHTMLをdropArear1に追加
dropArea3.appendChild(target);
}, false);
dropArea4.addEventListener('drop', () => {
//targetのHTMLをdropArear２に追加
dropArea4.appendChild(target);
}, false);
//ドロップ可能エリア上にある時
dropArea1.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea2.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea3.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
dropArea4.addEventListener('dragover', (event) => {
//drop処理に必要
event.preventDefault();
}, false);
</script>
</body>
</html>
```
そうしたところ、console.logでの判定はできましたが、
今度はX軸にのみ移動させたい要素がY軸にも移動してしまう点、ドロップした後に左端に要素が吸着される点に悩んでいる状態です。
mouseenter はまだ試しておりません。教えて下さりありがとうございます。
回答1件
0
ベストアンサー
質問がいまいち曖昧ですが、こんな感じでしょうか？
javascript
1$(function() { 2 $('.flow_sliderbutton1').draggable({ 3 axis: "x", 4 containment: '#line2_flex', 5 drag: function(e, ui) { 6 var l=$(this).offset().left; 7 var id="line4"; 8 if(l<$('#line4').offset().left) id="line3"; 9 if(l<$('#line3').offset().left) id="line2"; 10 if(l<$('#line2').offset().left) id="line1"; 11 console.log(id); 12 } 13 }); 14});
調整版
javascript
1<style> 2.dragimg{ 3display: flex; 4} 5.line{ 6 border-top:1rem solid red; 7width:25%; 8} 9.line:nth-child(odd){ 10 border-top:1rem solid blue; 11} 12.line2_flex{ 13display: flex; 14 flex-wrap:wrap; 15} 16.flow_sliderbutton1 { 17 width: 40px; 18 height: 40px; 19 border-radius: 50%; 20 background-color: #019C9C; 21 border: 7px solid #D6E7F3; 22 margin-top: -2rem; 23} 24</style> 25<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> 26<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> 27<script> 28$(function() { 29 var prev=""; 30 $('.flow_sliderbutton1').draggable({ 31 axis: "x", 32 containment: '#line2_flex', 33 drag: function(e, ui) { 34 var l=$(this).offset().left; 35 var id="line4"; 36 if(l<$('#line4').offset().left) id="line3"; 37 if(l<$('#line3').offset().left) id="line2"; 38 if(l<$('#line2').offset().left) id="line1"; 39 if(prev!=id){ 40 $('.'+id+'_btn').trigger('click'); 41 prev=id; 42 } 43 } 44 }); 45}); 46</script> 47 48<div class="e-n-tabs-heading" role="tablist"> 49<div class="line2_body"> 50<div class="line2_flex" id="line2_flex"> 51<div id="line1" class="line line1"></div> 52<div id="line2" class="line line2"></div> 53<div id="line3" class="line line3"></div> 54<div id="line4" class="line line4"></div> 55</div> 56<div class="flow_sliderbutton1"></div> 57</div> 58<input type="button" value="line1" class="line1_btn" onclick="console.log('click 1')"> 59<input type="button" value="line2" class="line2_btn" onclick="console.log('click 2')"> 60<input type="button" value="line3" class="line3_btn" onclick="console.log('click 3')"> 61<input type="button" value="line4" class="line4_btn" onclick="console.log('click 4')">
投稿2023/08/31 05:24
編集2023/08/31 06:37
総合スコア114845
ご回答ありがとうございます！！
ドラッグさせたい要素が#line1にいるときには#line1のボタンをtrigger()で発火させ、
#line２にいるときには#line２のボタンをtrigger()で発火させ、
#line3にいるときには#line3のボタンをtrigger()で発火させ、
#line4にいるときには#line4のボタンをtrigger()で発火させたいのですが
$('#line1').trigger();などをご回答のifの中に入れればいいのだろうかと思いますが入れ方が分かりません。
教えて頂けませんでしょうか。
ソースコードは下記のように変更いたしました。
### index.html
```ここに言語名を入力
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
<title>Document</title>
<style>
.dragimg{
display: flex;
}
.e-n-tabs-heading{
display: flex;
justify-content: center;
}
/* .dragimg div {
width:20%;
} */
.e-n-tabs-heading .e-n-tab-title{
width:20%;
}
.parent_box img{
width:100%;
}
.flow_sliderbutton1 {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #019C9C;
border: 7px solid #D6E7F3;
margin-top: -2rem;
}
.line2_body{
width:100%;
}
.line{
border-top:1rem solid red;
margin-top: 2rem;
}
.line1{
border-top:1rem solid red;
margin-top: 2rem;
width:25%;
}
.line2{
border-top:1rem solid rgb(0, 255, 55);
margin-top: 2rem;
width:25%;
}
.line3{
border-top:1rem solid rgb(26, 70, 136);
margin-top: 2rem;
width:25%;
}
.line4{
border-top:1rem solid rgb(204, 72, 116);
margin-top: 2rem;
width:25%;
}
.line2_flex{
display: flex;
}
</style>
</head>
<body>
<div class="e-n-tabs-heading" role="tablist">
<div id="e-n-tabs-title-1321" class="e-n-tab-title e-normal e-active" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="e-n-tab-content-1321" aria-expanded="true"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/01.png" class="number_right"></figure><p class="p_text_box2">ヒアリング・見積もり</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-13.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1322" class="e-n-tab-title e-normal" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1322" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/02.png" class="number_right"></figure><p class="p_text_box2">内容提案</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-15.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1323" class="e-n-tab-title e-normal" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1323" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"><div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/03.png" class="number_right"></figure><p class="p_text_box2">デザイン制作</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-16.png" alt="" width="340" height="219"></div></div></span></div><div id="e-n-tabs-title-1324" class="e-n-tab-title e-normal" aria-selected="false" data-tab="4" role="tab" tabindex="-1" aria-controls="e-n-tab-content-1324" aria-expanded="false"> <span class="e-n-tab-icon"></span> <span class="e-n-tab-title-text"> <div id="box1"><div class="box2"><div class="parent_box"><figure class="side_image"><img decoding="async" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/08/04.png" class="number_right"></figure><p class="p_text_box2">サイト公開</p></div><img decoding="async" loading="lazy" src="http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/NoPath-コピー-17.png" alt="" width="340" height="219"></div></div></span></div> </div>
<div class="line2_body">
<div class="line2_flex" id="line2_flex">
<div id="line1" class="line line1"><button class="btn line1_btn">ボタン1</button></div>
<div id="line2" class="line line2"><button class="btn line2_btn">ボタン2</button></div>
<div id="line3" class="line line3"><button class="btn line3_btn">ボタン3</button></div>
<div id="line4" class="line line4"><button class="btn line3_btn">ボタン4</button></div>
</div>
<div class="flow_sliderbutton1"></div>
</div>
<script>
jQuery(function() {
jQuery('.line1_btn').click(function() {
console.log('クリックされました1')
});
});
jQuery(function() {
jQuery('.line2_btn').click(function() {
console.log('クリックされました2')
});
});
jQuery(function() {
jQuery('.line3_btn').click(function() {
console.log('クリックされました3')
});
});
jQuery(function() {
jQuery('.line4_btn').click(function() {
console.log('クリックされました4')
});
});
</script>
<script>
$(function() {
$('.flow_sliderbutton1').draggable({
axis: "x",
containment: '#line2_flex',
drag: function(e, ui) {
var l=$(this).offset().left;
var id="line4";
if(l<$('#line4').offset().left) id="line3";
if(l<$('#line3').offset().left) id="line2";
if(l<$('#line2').offset().left) id="line1";
console.log(id);
}
});
});
</script>
</body>
</html>
```
自分なりに、下記のように書いてみましたが全く動かなくなりました。
何が間違っているのか教えて頂けると幸いです。
<script>
$(function() {
$('.flow_sliderbutton1').draggable({
axis: "x",
containment: '#line2_flex',
drag: function(e, ui) {
var l=$(this).offset().left;
var id="line4";
if(l<$('#line4').offset().left){
id="line3";
$('.line3_btn').trigger();
}
if(l<$('#line3').offset().left) {
id="line2";
$('.line2_btn').trigger();
}
if(l<$('#line2').offset().left) {
id="line1";
$('.line1_btn').trigger();
};
console.log(id);
$('.line4_btn').trigger();
}
});
});
</script>
＞#line1のボタンをtrigger()で発火させ
の意味がわかりませえん。#line1は背景のバーですよね？
toriggerはイベントを指定しないと意味がないです
var l=$(this).offset().left;
var id="line4";
if(l<$('#line4').offset().left) id="line3";
if(l<$('#line3').offset().left) id="line2";
if(l<$('#line2').offset().left) id="line1";
$('.’+id+'_btn').trigger('click');
みたいなことですか？
申し訳ございません。ドラッグしたい要素が、
#line1の領域にいる場合、もしくはその領域に入ったときにはボタン.line1_btnをtrigger()で発火させ
#line2の領域にいる場合、もしくはその領域に入ったときにはボタン.line2_btnをtrigger()で発火させ
#line3の領域にいる場合、もしくはその領域に入ったときにはボタン.line3_btnをtrigger()で発火させ
#line4の領域にいる場合、もしくはその領域に入ったときにはボタン.line4_btnをtrigger()で発火させ
に訂正します。
ちなみにdrag中は連続して発生しますが大丈夫ですか？
すみません。drag中一回のみの発火にするにはどのようにすればよろしいでしょうか？
.one().trigger('click');で実装できるか自分でも検証致します。
調整版あげておきました
ありがとうございます本当に助かりました
あなたの回答
tips
プレビュー
