Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Drag y drop

JavaScript - Drag y drop

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Drag y drop

Publicado por diego (2 intervenciones) el 11/02/2014 21:36:32
Hola a todos,

Quisiera saber si hay por ahí algún ejemplo de drag y drop, lo que intento hacer es:

Tengo una tabla con registros obtenidos de una base de datos.

Tengo un menú con distintos links.

Lo que intento hacer es que se puedan arrastrar las filas desde la tabla hacia el menu, al soltarlos en cualquier opcion del menu que me cambie un valor (id) de la base de datos.

He encontrado un par de ejemplos pero no logro entender como modificar los para que hago lo que comento arriba.

Desde ya muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Drag y drop

Publicado por diego (2 intervenciones) el 12/02/2014 00:18:17
Ya creo entender mas o menos como es la sintaxis, ahora, me podrían explicar porque este código no me funciona?

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
<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta http-equiv='content-type' content='text/html; charset=utf-8' />
		 <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Mis tareas</title>
		<meta name='keywords' content='' />
		<meta name='description' content='' />
 
		<link href="../estilos/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="../estilos/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
		<link href='../estilos/estilo.css' rel='stylesheet' type='text/css' />
		<link href='../estilos/tabla.css' rel='stylesheet' type='text/css' />
 
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="../js/jquery_ui/jquery-ui-1.10.4.custom.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap/bootstrap.min.js"></script>
 
		<script type="text/javascript" src="../js/jquery-validation-1.11.1/dist/jquery.validate.min.js"></script>
		<script type="text/javascript" src="../js/jquery-validation-1.11.1/lib/jquery.metadata.js"></script>
		<script type="text/javascript" src="../js/jquery-validation-1.11.1/localization/messages_es.js"></script>
		<script type="text/javascript" src="../js/mainjavaScript.js"></script>
 
	</head>
 
<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">
$(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);
		}
 
	});
	// listas	

	function deleteCuerpo1($item) {
		$item.fadeOut(function() {
			$($item).appendTo($cuerpo2).fadeIn();
		});
		$item.fadeIn();
	}
	function deleteCuerpo2($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>
 
</body>
</html>

Y otra cosa donde puedo ver el tema del envío de datos mediante ajax para jquery.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar