質問編集履歴

1

ソースコードの追加

2021/04/12 07:35

投稿

kuuhaku4262
kuuhaku4262

スコア39

test CHANGED
File without changes
test CHANGED
@@ -14,13 +14,135 @@
14
14
 
15
15
  ```html
16
16
 
17
- <button type="button" data-bind="click: open">
18
-
19
- <div id="a" style="display: none">削除エリア</div>
20
-
21
- <table> // 省略 </table>
22
-
23
- <div id="b" style="display: none">削除エリア</div>
17
+ <div class="edit_button_retu">
18
+
19
+ <button class="edit_button" type="button" data-bind="click: openModal">編集</button>
20
+
21
+ </div>
22
+
23
+ <table>
24
+
25
+ <tr>
26
+
27
+ <div id="top_delete" class="delete-drop-place" style="display:none" data-bind="event: {drop: deleteDrop, dragover: deleteDragOver}">
28
+
29
+ 削除する場合は、ここにドロップしてください。
30
+
31
+ </div>
32
+
33
+ </tr>
34
+
35
+ <tr class="thed_color">
36
+
37
+ <th>グループ名</th>
38
+
39
+ <th colspan="6">ドライバー/追記事項</th>
40
+
41
+ <th>削除</th>
42
+
43
+ </tr>
44
+
45
+ <!-- ko foreach: mailData -->
46
+
47
+ <tr>
48
+
49
+ <td rowspan="2" class="droppable-place group" judgment="group" draggable="true" data-bind="text: $data['groupName'], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '1', 'group'); }, dragover: function(data, event){ return dragOver(data, event, 'group'); }}"></td>
50
+
51
+ <input type="hidden" data-bind="value: $data['groupName'], attr: {name: 'data[ProgramTableData][' + $index() + '][group_nm]'}">
52
+
53
+ <td class="driver" judgment="driver" number="1" draggable="true" data-bind="text: $data['driverName'][1], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '1', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
54
+
55
+ <input type="hidden" data-bind="value: $data['driverName'][1], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][1]'}">
56
+
57
+ <td class="postscript">
58
+
59
+ <input class="postscript_input" data-bind="value: $data['postscript'][1], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][1]'}">
60
+
61
+ </td>
62
+
63
+ <td class="driver" judgment="driver" number="2" draggable="true" data-bind="text: $data['driverName'][2], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '2', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
64
+
65
+ <input type="hidden" data-bind="value: $data['driverName'][2], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][2]'}">
66
+
67
+ <td class="postscript">
68
+
69
+ <input class="postscript_input" data-bind="value: $data['postscript'][2], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][2]'}">
70
+
71
+ </td>
72
+
73
+ <td class="driver" judgment="driver" number="3" draggable="true" data-bind="text: $data['driverName'][3], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '3', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
74
+
75
+ <input type="hidden" data-bind="value: $data['driverName'][3], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][3]'}">
76
+
77
+ <td class="postscript">
78
+
79
+ <input class="postscript_input" data-bind="value: $data['postscript'][3], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][3]'}">
80
+
81
+ </td>
82
+
83
+ <td rowspan="2" class="button_td">
84
+
85
+ <button type="button" class="delete_line_button" data-bind="click: deleteData">X</button>
86
+
87
+ </td>
88
+
89
+ </tr>
90
+
91
+ <tr>
92
+
93
+ <td class="driver" judgment="driver" number="4" draggable="true" data-bind="text: $data['driverName'][4], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '4', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
94
+
95
+ <input type="hidden" data-bind="value: $data['driverName'][4], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][4]'}">
96
+
97
+ <td class="postscript">
98
+
99
+ <input class="postscript_input" data-bind="value: $data['postscript'][4], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][4]'}">
100
+
101
+ </td>
102
+
103
+ <td class="driver" judgment="driver" number="5" draggable="true" data-bind="text: $data['driverName'][5], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '5', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
104
+
105
+ <input type="hidden" data-bind="value: $data['driverName'][5], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][5]'}">
106
+
107
+ <td class="postscript">
108
+
109
+ <input class="postscript_input" data-bind="value: $data['postscript'][5], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][5]'}">
110
+
111
+ </td>
112
+
113
+ <td class="driver" judgment="driver" number="6" draggable="true" data-bind="text: $data['driverName'][6], event: {dragstart: dragStart, dragend: dragEnd, drop: function(data, event) { return drop(data, event, '6', 'driver'); }, dragover: function(data, event){ return dragOver(data, event, 'driver'); }}"></td>
114
+
115
+ <input type="hidden" data-bind="value: $data['driverName'][6], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][6]'}">
116
+
117
+ <td class="postscript">
118
+
119
+ <input class="postscript_input" data-bind="value: $data['postscript'][6], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][6]'}">
120
+
121
+ </td>
122
+
123
+ </tr>
124
+
125
+ <!-- /ko -->
126
+
127
+ <tr class="thed_color">
128
+
129
+ <td colspan="8" class="button_td">
130
+
131
+ <button type="button" class="add_line_button" data-bind="click: addToData">+</button>
132
+
133
+ </td>
134
+
135
+ </tr>
136
+
137
+ <tr>
138
+
139
+ <div id="bottom_delete" class="delete-drop-place" style="display:none" data-bind="event: {drop: deleteDrop, dragover: deleteDragOver}">
140
+
141
+ 削除する場合は、ここにドロップしてください。
142
+
143
+ </div>
144
+
145
+ </tr>
24
146
 
25
147
  ```
26
148
 
@@ -32,11 +154,263 @@
32
154
 
33
155
  self = this;
34
156
 
157
+ // データを1件追加する
158
+
159
+ self.addToData = function(){
160
+
161
+ self.mailData.push({
162
+
163
+ groupName: ko.observable(''),
164
+
165
+ groupId: ko.observable(''),
166
+
167
+ driverName: {
168
+
169
+ 1: ko.observable(''),
170
+
171
+ 2: ko.observable(''),
172
+
173
+ 3: ko.observable(''),
174
+
175
+ 4: ko.observable(''),
176
+
177
+ 5: ko.observable(''),
178
+
179
+ 6: ko.observable(''),
180
+
181
+ },
182
+
183
+ driverId: {
184
+
185
+ 1: ko.observable(''),
186
+
187
+ 2: ko.observable(''),
188
+
189
+ 3: ko.observable(''),
190
+
191
+ 4: ko.observable(''),
192
+
193
+ 5: ko.observable(''),
194
+
195
+ 6: ko.observable(''),
196
+
197
+ },
198
+
199
+ postscript: {
200
+
201
+ 1: ko.observable(''),
202
+
203
+ 2: ko.observable(''),
204
+
205
+ 3: ko.observable(''),
206
+
207
+ 4: ko.observable(''),
208
+
209
+ 5: ko.observable(''),
210
+
211
+ 6: ko.observable(''),
212
+
213
+ }
214
+
215
+ });
216
+
217
+ }
218
+
219
+
220
+
221
+ // データを1件削除する
222
+
223
+ self.deleteData = function(place){
224
+
225
+ self.mailData.remove(place);
226
+
227
+ }
228
+
229
+
230
+
231
+ self.addToData();
232
+
233
+
234
+
235
+     // サブ画面を表示
236
+
35
- self.open = function(){
237
+ self.openModal = function(){
36
-
238
+
37
- $('#a').removeAttr('style');
239
+ $('#modal').removeAttr('style');
38
-
240
+
39
- $('#b').removeAttr('style');
241
+ $('#top_delete').removeAttr('style');
242
+
243
+ $('#bottom_delete').removeAttr('style');
244
+
245
+ }
246
+
247
+
248
+
249
+ /*** ドラッグアンドドロップ ***/
250
+
251
+ let draggingItem = null;
252
+
253
+ let oldEvent = null; // ドロップ元のイベント格納用
254
+
255
+ let moveFlag = 0; // サブ画面からのドロップかメイン画面での移動化を判断するフラグ
256
+
257
+
258
+
259
+ // ドラッグ開始
260
+
261
+ self.dragStart = function(data, event){
262
+
263
+ draggingItem = data;
264
+
265
+ oldEvent = event;
266
+
267
+ return true;
268
+
269
+ }
270
+
271
+ // ドラッグ中
272
+
273
+ self.dragOver = function(data, event, judgment){
274
+
275
+ if (draggingItem === undefined) {
276
+
277
+ return;
278
+
279
+ }
280
+
281
+
282
+
283
+ // マウスの当たっている箇所に応じて、マウス形状を変更する。
284
+
285
+ if(draggingItem['judgment']){
286
+
287
+ // サブ画面からメイン画面Ver
288
+
289
+ if(draggingItem['judgment'] == judgment){
290
+
291
+ event.originalEvent.dataTransfer.dropEffect = "copy";
292
+
293
+ }else{
294
+
295
+ event.originalEvent.dataTransfer.dropEffect = "none";
296
+
297
+ }
298
+
299
+ }else{
300
+
301
+ // メイン画面で移動Ver
302
+
303
+ if(oldEvent['delegateTarget']['attributes']['judgment']['nodeValue'] == judgment){
304
+
305
+ event.originalEvent.dataTransfer.dropEffect = "copy";
306
+
307
+ }else{
308
+
309
+ event.originalEvent.dataTransfer.dropEffect = "none";
310
+
311
+ }
312
+
313
+
314
+
315
+ moveFlag = 1;
316
+
317
+ }
318
+
319
+
320
+
321
+ }
322
+
323
+ // ドラッグ終了
324
+
325
+ self.dragEnd = function(data, event){
326
+
327
+ draggingItem = null;
328
+
329
+ moveFlag = 0;
330
+
331
+ return true;
332
+
333
+ }
334
+
335
+ // ドロップ
336
+
337
+ self.drop = function(data, event, number, judgment){
338
+
339
+ if (! draggingItem['judgment'] == judgment) {
340
+
341
+ draggingItem = null;
342
+
343
+ return;
344
+
345
+ }
346
+
347
+
348
+
349
+ if(moveFlag == 0){ // サブ画面からメイン画面Ver
350
+
351
+ // ドロップしたアイテムの名前とIDをデータに入れる
352
+
353
+ if(draggingItem['judgment'] == 'group'){
354
+
355
+ data['groupName'](draggingItem['name']);
356
+
357
+ data['groupId'](draggingItem['id']);
358
+
359
+ }else{
360
+
361
+ data['driverName'][number](draggingItem['driver_nm']);
362
+
363
+ data['driverId'][number](draggingItem['id']);
364
+
365
+ }
366
+
367
+ }else{// メイン画面で移動Ver
368
+
369
+ // 移動先のデータに移動元アイテムの名前とIDを入れる
370
+
371
+ if(oldEvent['delegateTarget']['attributes']['judgment']['nodeValue'] == 'group'){
372
+
373
+ let name = draggingItem['groupName']();
374
+
375
+ let id = draggingItem['groupId']();
376
+
377
+ draggingItem['groupName']('');
378
+
379
+ draggingItem['groupId']('');
380
+
381
+ data['groupName'](name);
382
+
383
+ data['groupId'](id);
384
+
385
+ }else{
386
+
387
+ let name = draggingItem['driverName'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']]();
388
+
389
+ let id = draggingItem['driverId'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']]()
390
+
391
+ draggingItem['driverName'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']]('');
392
+
393
+ draggingItem['driverId'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']]('');
394
+
395
+ data['driverName'][number](name);
396
+
397
+ data['driverId'][number](id);
398
+
399
+ }
400
+
401
+ }
402
+
403
+
404
+
405
+ oldEvent = null;
406
+
407
+ draggingItem = null;
408
+
409
+ moveFlag = 0;
410
+
411
+ }
412
+
413
+
40
414
 
41
415
  }
42
416
 
@@ -48,9 +422,9 @@
48
422
 
49
423
  ```
50
424
 
51
- <div id="a"></div>
425
+ <div id="top_delete"></div>
52
-
426
+
53
- <div id="b"></div>
427
+ <div id="bottom_delete"></div>
54
428
 
55
429
  <table></table>
56
430