Mover filas entre tablas Arrastrando
Publicado por David (1 intervención) el 07/10/2013 12:37:04
Hola buenas, llevo unos dias intentado pasar filas entre tablas usando Jquery para arrastrar dichas filas. Lo he conseguido para 2 tablas, pero cuando quiero meter una tercera...las cosas no funcionan jaja os dejo mi codigo a ver si podeis decirme como puedo seguir. Un saludo y gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tienda</title>
<style type="text/css">
<!--
body,td,th {
color: #333333;
}
#tabla_prueba1, #tabla_prueba2 { width: 210px; margin: 10px; background-color: red; text-align: center; }
tr { float: left; }
th, td { width: 70px;}
</style>
<script language="javascript" src="js/jquery-1.3.1.min.js"></script>
<script language="javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var $cuerpo1 = $('#cuerpo1'), $cuerpo2 = $('#cuerpo2'), $cuerpo3 = $('#cuerpo3');
// lista 1
$('tr',$cuerpo1).draggable({
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
$cuerpo1.droppable({
accept: '#cuerpo2 tr',
drop: function(ev, ui) {
deleteCuerpo2(ui.draggable);
}
});
/* lista2 */ $('tr',$cuerpo2).draggable({
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
$cuerpo2.droppable({
accept: '#cuerpo1 tr',
drop: function(ev, ui) {
deleteCuerpo1(ui.draggable);
}
});
/* lista 3*/ $('tr',$cuerpo3).draggable({
revert: 'invalid',
helper: 'clone',
cursor: 'move'
});
$cuerpo3.droppable({
accept: '#cuerpo1 tr',
drop: function(ev, ui) {
deleteCuerpo1(ui.draggable);
}
});
// listas
function deleteCuerpo1($item) {
$item.fadeOut(function() {
$($item).appendTo($cuerpo2).fadeIn();
});
$item.fadeIn();
}
function deleteCuerpo2($item) {
$item.fadeOut(function() {
$item.appendTo($cuerpo1).fadeIn();
});
}
function deleteCuerpo3($item) {
$item.fadeOut(function() {
$item.appendTo($cuerpo1).fadeIn();
});
}
});
</script>
</head>
<body>
<table id="tabla_prueba1">
<thead>
<tr id="cabecera">
<th>PIM</th>
<th>PAM</th>
<th>PUM</th>
</tr>
</thead>
<tbody id="cuerpo1">
<tr id="fila1">
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr id="fila2">
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</tbody>
</table>
<table id="tabla_prueba2">
<thead>
<tr id="cabecera">
<th>PIM</th>
<th>PAM</th>
<th>PUM</th>
</tr>
</thead>
<tbody id="cuerpo2">
<tr id="fila3">
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
<tr id="fila4">
<td>Celda 10</td>
<td>Celda 11</td>
<td>Celda 12</td>
</tr>
</tbody>
</table>
<table id="tabla_prueba2">
<thead>
<tr id="cabecera">
<th>PIM</th>
<th>PAM</th>
<th>PUM</th>
</tr>
</thead>
<tbody id="cuerpo3">
<tr id="fila5">
<td>Celda 13</td>
<td>Celda 14</td>
<td>Celda 15</td>
</tr>
<tr id="fila6">
<td>Celda 16</td>
<td>Celda 17</td>
<td>Celda 18</td>
</tr>
</tbody>
</table>
</body>
</html>Valora esta pregunta
0