Rieccomi,
ho provveduto a modificare il codice html della tabella in questo modo:
codice:
<table id="commessa">
<tbody>
<tr>
<td>Intervento</td>
<td>Fornitore</td>
<td>Q.tà</td>
<td>Unitario</td>
<td>Sconto %</td>
<td>Totale</td>
<td>Add</td>
<!--<td>Move</td>-->
</tr>
<tr class="righe" draggable="true" ondragstart="start()" ondragover="dragover()">
<td><input type="text" name="itr1" id="itr1" class="t1" size="30" placeholder="Max 49 caratteri" maxlength="49" required ></td>
<td><input type="text" name="for1" id="for1" class="t1" size="10"></td>
<td><input type="text" name="q1" class="t2 somma" onKeyUp="SommaRiga(1)" id="q1" size="3" value="0.0" placeholder="0" required></td>
<td><input type="text" name="iu1" class="t2 somma" onKeyUp="SommaRiga(1)" onBlur="Format(1)" id="iu1" size="6" value="0.0" placeholder="0.00" autocomplete="off"></td>
<td><input type="text" name="sc1" class="t2 somma" onKeyUp="Virgola(1)" id="sc1" size="8" value="0.0" placeholder="sconto" autocomplete="off"></td>
<td><input type="text" name="imp_1" id="imp_1" class="t2 somma" size="8" value="0.0" placeholder="0.00" readonly></td>
<td><img src="images/add.png" name="add1" width="16" height="16" id="add1" class="add"></td>
<!--<td><img src="icon/move.png" name="move1" width="16" height="16" id="move1" class="move"></td>-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Tot. Gen.</td>
<td><input type="text" name="totale" class="t2" id="totale" size="7" value="" placeholder="0.00" readonly></td>
</tr>
</tbody>
</table>
mentre lato javascript ho aggiunto questo:
codice:
<!-- SCRIPT SPOSTAMENTO DINAMICO ROW TABLE -->
<script type="text/javascript">
var row;
function start(){
row = event.target;
}
function dragover(){
var e = event;
e.preventDefault();
let children= Array.from(e.target.parentNode.parentNode.children);
if(children.indexOf(e.target.parentNode)>children.indexOf(row))
e.target.parentNode.after(row);
else
e.target.parentNode.before(row);
}
</script>
Con questa implementazione si presentano 3 problemi:
1) L'utente quando sposta la cella deve cliccare su un punto bianco qualsiasi (non avendo nessuna icona maniglia) se aggiungo la maniglia non si spostano le righe ma si sposta l'icona della maniglia;
2) Lo spostamento è abbastanza semplice e funzionale utilizzando google chrome (ovvero se l'utente cliccando su un punto bianco dello schermo e muove il mouse verso l'altro o il basso funziona, deve prestare attenzione a non spostarsi verso sinistra o destra altrimenti si sballa la tabella;
3) La stessa identica implemantazione con browser firefox sballa completamente la tabella in fase di spostamento.