Q&A
第三者が再現できるよう、当たり障りない範囲でソース全体を掲載してほしいです。あと、Chromeだけで試しているなら、他のwebブラウザでも同様かどうか評価するといいです。
前提・実現したいこと
ウェブソフトを制作しています。
ボタンを押したときに、2つの削除エリアを表示させたいです。
発生している問題・エラーメッセージ
html
1<div class="edit_button_retu"> 2 <button class="edit_button" type="button" data-bind="click: openModal">編集</button> 3</div> 4<table> 5 <tr> 6 <div id="top_delete" class="delete-drop-place" style="display:none" data-bind="event: {drop: deleteDrop, dragover: deleteDragOver}"> 7 削除する場合は、ここにドロップしてください。 8 </div> 9 </tr> 10 <tr class="thed_color"> 11 <th>グループ名</th> 12 <th colspan="6">ドライバー/追記事項</th> 13 <th>削除</th> 14 </tr> 15 <!-- ko foreach: mailData --> 16 <tr> 17 <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> 18 <input type="hidden" data-bind="value: $data['groupName'], attr: {name: 'data[ProgramTableData][' + $index() + '][group_nm]'}"> 19 <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> 20 <input type="hidden" data-bind="value: $data['driverName'][1], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][1]'}"> 21 <td class="postscript"> 22 <input class="postscript_input" data-bind="value: $data['postscript'][1], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][1]'}"> 23 </td> 24 <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> 25 <input type="hidden" data-bind="value: $data['driverName'][2], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][2]'}"> 26 <td class="postscript"> 27 <input class="postscript_input" data-bind="value: $data['postscript'][2], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][2]'}"> 28 </td> 29 <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> 30 <input type="hidden" data-bind="value: $data['driverName'][3], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][3]'}"> 31 <td class="postscript"> 32 <input class="postscript_input" data-bind="value: $data['postscript'][3], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][3]'}"> 33 </td> 34 <td rowspan="2" class="button_td"> 35 <button type="button" class="delete_line_button" data-bind="click: deleteData">X</button> 36 </td> 37 </tr> 38 <tr> 39 <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> 40 <input type="hidden" data-bind="value: $data['driverName'][4], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][4]'}"> 41 <td class="postscript"> 42 <input class="postscript_input" data-bind="value: $data['postscript'][4], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][4]'}"> 43 </td> 44 <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> 45 <input type="hidden" data-bind="value: $data['driverName'][5], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][5]'}"> 46 <td class="postscript"> 47 <input class="postscript_input" data-bind="value: $data['postscript'][5], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][5]'}"> 48 </td> 49 <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> 50 <input type="hidden" data-bind="value: $data['driverName'][6], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_nm][6]'}"> 51 <td class="postscript"> 52 <input class="postscript_input" data-bind="value: $data['postscript'][6], attr: {name: 'data[ProgramTableData][' + $index() + '][driver_input][6]'}"> 53 </td> 54 </tr> 55 <!-- /ko --> 56 <tr class="thed_color"> 57 <td colspan="8" class="button_td"> 58 <button type="button" class="add_line_button" data-bind="click: addToData">+</button> 59 </td> 60 </tr> 61 <tr> 62 <div id="bottom_delete" class="delete-drop-place" style="display:none" data-bind="event: {drop: deleteDrop, dragover: deleteDragOver}"> 63 削除する場合は、ここにドロップしてください。 64 </div> 65 </tr>
javascript
1self = this; 2// データを1件追加する 3 self.addToData = function(){ 4 self.mailData.push({ 5 groupName: ko.observable(''), 6 groupId: ko.observable(''), 7 driverName: { 8 1: ko.observable(''), 9 2: ko.observable(''), 10 3: ko.observable(''), 11 4: ko.observable(''), 12 5: ko.observable(''), 13 6: ko.observable(''), 14 }, 15 driverId: { 16 1: ko.observable(''), 17 2: ko.observable(''), 18 3: ko.observable(''), 19 4: ko.observable(''), 20 5: ko.observable(''), 21 6: ko.observable(''), 22 }, 23 postscript: { 24 1: ko.observable(''), 25 2: ko.observable(''), 26 3: ko.observable(''), 27 4: ko.observable(''), 28 5: ko.observable(''), 29 6: ko.observable(''), 30 } 31 }); 32 } 33 34 // データを1件削除する 35 self.deleteData = function(place){ 36 self.mailData.remove(place); 37 } 38 39 self.addToData(); 40 41 // サブ画面を表示 42 self.openModal = function(){ 43 $('#modal').removeAttr('style'); 44 $('#top_delete').removeAttr('style'); 45 $('#bottom_delete').removeAttr('style'); 46 } 47 48/*** ドラッグアンドドロップ ***/ 49 let draggingItem = null; 50 let oldEvent = null; // ドロップ元のイベント格納用 51 let moveFlag = 0; // サブ画面からのドロップかメイン画面での移動化を判断するフラグ 52 53 // ドラッグ開始 54 self.dragStart = function(data, event){ 55 draggingItem = data; 56 oldEvent = event; 57 return true; 58 } 59 // ドラッグ中 60 self.dragOver = function(data, event, judgment){ 61 if (draggingItem === undefined) { 62 return; 63 } 64 65 // マウスの当たっている箇所に応じて、マウス形状を変更する。 66 if(draggingItem['judgment']){ 67 // サブ画面からメイン画面Ver 68 if(draggingItem['judgment'] == judgment){ 69 event.originalEvent.dataTransfer.dropEffect = "copy"; 70 }else{ 71 event.originalEvent.dataTransfer.dropEffect = "none"; 72 } 73 }else{ 74 // メイン画面で移動Ver 75 if(oldEvent['delegateTarget']['attributes']['judgment']['nodeValue'] == judgment){ 76 event.originalEvent.dataTransfer.dropEffect = "copy"; 77 }else{ 78 event.originalEvent.dataTransfer.dropEffect = "none"; 79 } 80 81 moveFlag = 1; 82 } 83 84 } 85 // ドラッグ終了 86 self.dragEnd = function(data, event){ 87 draggingItem = null; 88 moveFlag = 0; 89 return true; 90 } 91 // ドロップ 92 self.drop = function(data, event, number, judgment){ 93 if (! draggingItem['judgment'] == judgment) { 94 draggingItem = null; 95 return; 96 } 97 98 if(moveFlag == 0){ // サブ画面からメイン画面Ver 99 // ドロップしたアイテムの名前とIDをデータに入れる 100 if(draggingItem['judgment'] == 'group'){ 101 data['groupName'](draggingItem['name']); 102 data['groupId'](draggingItem['id']); 103 }else{ 104 data['driverName'][number](draggingItem['driver_nm']); 105 data['driverId'][number](draggingItem['id']); 106 } 107 }else{// メイン画面で移動Ver 108 // 移動先のデータに移動元アイテムの名前とIDを入れる 109 if(oldEvent['delegateTarget']['attributes']['judgment']['nodeValue'] == 'group'){ 110 let name = draggingItem['groupName'](); 111 let id = draggingItem['groupId'](); 112 draggingItem['groupName'](''); 113 draggingItem['groupId'](''); 114 data['groupName'](name); 115 data['groupId'](id); 116 }else{ 117 let name = draggingItem['driverName'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']](); 118 let id = draggingItem['driverId'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']]() 119 draggingItem['driverName'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']](''); 120 draggingItem['driverId'][oldEvent['delegateTarget']['attributes']['number']['nodeValue']](''); 121 data['driverName'][number](name); 122 data['driverId'][number](id); 123 } 124 } 125 126 oldEvent = null; 127 draggingItem = null; 128 moveFlag = 0; 129 } 130 131}
上記でボタンを押すと、以下のようなhtmlになってしまいます。
<div id="top_delete"></div> <div id="bottom_delete"></div> <table></table>
divタグがtableタグの上に移動してしまう原因と対処法が分かりません。
補足情報（FW/ツールのバージョンなど）
足りない情報などがあれば、コメントにお願いします。
ご指摘、ありがとうございます。
可能な範囲でソースを掲載するよう修正致します。
必要だと思うソースコードを追加しました。
もし、足りないコードがありましたらご指摘お願いします。
edgeでも同じ動作になりました。
あなたの回答
tips
プレビュー
