質問編集履歴
4
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
// 全てtrueになってしまう（質問1の箇所）
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
###### ２．
|
|
62
|
+
###### ２．DOMで<div class="children">を持っている<draggable>を配列で取得して、DOMから直接:disabledをfalseにする
|
|
63
63
|
```
|
|
64
64
|
dragPossible: function() {
|
|
65
65
|
// childrenクラスを持つDOMを配列で取得
|
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
let targetLength = targetLists.length;
|
|
69
69
|
// 配列の中身を出力する
|
|
70
70
|
for (let i = 0; i < targetLength; i++) {
|
|
71
|
-
|
|
71
|
+
// 親element（<draggable>）のdisabledをtrueに変更
|
|
72
|
-
targetLists[i].parentElement.
|
|
72
|
+
targetLists[i].parentElement.disabled = true; // 変化なし
|
|
73
|
-
targetLists[i].parentElement[
|
|
73
|
+
targetLists[i].parentElement[disabled] = true; // 変化なし
|
|
74
|
-
targetLists[i].parentElement.getAttribute['
|
|
74
|
+
targetLists[i].parentElement.getAttribute['disabled'] = true; // 変化なし
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
77
|
// DOMから、draggableの:disabledは操作できない？（質問2の箇所）
|
3
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,6 +41,11 @@
|
|
|
41
41
|
２．```mouseover```している<draggable>（1つ目と3つ目）は、```:disabled="false"```にする
|
|
42
42
|
３．２で```:disabled="false"```にしたものを、```mouseout```したタイミングで```:disabled="true"```に戻す
|
|
43
43
|
|
|
44
|
+
### 質問
|
|
45
|
+
１．v-bindディレクティブに単一の式の記述はできるのか（書き方が誤っているだけ）
|
|
46
|
+
２．DOM（document.getElementsByClassName）で取得した配列から、v-bindディレクティブを操作できるのか（書き方が誤っているだけ）
|
|
47
|
+
３．上記いずれも誤っている場合、方向性だけご教授いただきたいです
|
|
48
|
+
|
|
44
49
|
### やったこと
|
|
45
50
|
上記を解決するために、以下の2つに取り組みました。
|
|
46
51
|
###### １．v-bind:disabledに直接、計算式を書く
|
|
@@ -51,8 +56,9 @@
|
|
|
51
56
|
@mouseover="dragPossible"
|
|
52
57
|
@mouseout="dragImpossible"
|
|
53
58
|
>
|
|
54
|
-
// 全てtrueになってしまう
|
|
59
|
+
// 全てtrueになってしまう（質問1の箇所）
|
|
55
60
|
```
|
|
61
|
+
|
|
56
62
|
###### ２．対象のDOM（Bを持っているA）を配列で取得して、for文でDOMから直接:disabledをfalseにする
|
|
57
63
|
```
|
|
58
64
|
dragPossible: function() {
|
|
@@ -68,7 +74,7 @@
|
|
|
68
74
|
targetLists[i].parentElement.getAttribute['draggable'] = true; // 変化なし
|
|
69
75
|
};
|
|
70
76
|
}
|
|
71
|
-
// DOMから、draggableの:disabledは操作できない？
|
|
77
|
+
// DOMから、draggableの:disabledは操作できない？（質問2の箇所）
|
|
72
78
|
```
|
|
73
79
|
|
|
74
80
|
お力添えいただけると幸いです。
|
2
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@mouseover="dragPossible"
|
|
10
10
|
@mouseout="dragImpossible"
|
|
11
11
|
>
|
|
12
|
-
<div class="children" v-
|
|
12
|
+
<div class="children" v-show="child[i]"></div>
|
|
13
13
|
</draggable>
|
|
14
14
|
</div>
|
|
15
15
|
<script>
|
|
@@ -37,9 +37,9 @@
|
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
### やりたいこと・仕様
|
|
40
|
-
１．```<div class="children">```を持っている```<draggable>```（1つ目と
|
|
40
|
+
１．```<div class="children">```を持っている```<draggable>```（1つ目と3つ目）は、```:disabled="true"```にする
|
|
41
|
-
２．```mouseover```している<draggable>（1つ目と
|
|
41
|
+
２．```mouseover```している<draggable>（1つ目と3つ目）は、```:disabled="false"```にする
|
|
42
|
-
３．２で```:disabled="false"```にしたものを、```mouseout```したタイミングで```
|
|
42
|
+
３．２で```:disabled="false"```にしたものを、```mouseout```したタイミングで```:disabled="true"```に戻す
|
|
43
43
|
|
|
44
44
|
### やったこと
|
|
45
45
|
上記を解決するために、以下の2つに取り組みました。
|
1
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@mouseover="dragPossible"
|
|
10
10
|
@mouseout="dragImpossible"
|
|
11
11
|
>
|
|
12
|
-
<div class="children" v-if="child
|
|
12
|
+
<div class="children" v-if="child[i]"></div>
|
|
13
13
|
</draggable>
|
|
14
14
|
</div>
|
|
15
15
|
<script>
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
},
|
|
20
20
|
data: function () {
|
|
21
21
|
return {
|
|
22
|
-
|
|
22
|
+
child1: true,
|
|
23
|
-
|
|
23
|
+
child2: false,
|
|
24
|
-
|
|
24
|
+
child3: true,
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
methods: {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
```
|
|
48
48
|
<draggable
|
|
49
49
|
class="drag"
|
|
50
|
-
:disabled="
|
|
50
|
+
:disabled="child1 ? 'true' : 'false'"
|
|
51
51
|
@mouseover="dragPossible"
|
|
52
52
|
@mouseout="dragImpossible"
|
|
53
53
|
>
|