AJAX - drag and drop entre dos listas

   
Vista:

drag and drop entre dos listas

Publicado por hercross (3 intervenciones) el 28/04/2016 00:23:32
Hola buenas noches...

Estoy haciendo unas pruebas con ajax, soy novato, y me gustaría hacer un drag and drop entre dos columnas.. Algo tipo a esto: http://jsfiddle.net/T68Fn/

Buscando por la web, he encontrado varios ejemplos y he hecho este:

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
<div class="text">
	<div class="listBlock">
		<ul id="sortable1" class="droptrue">
			<li id="1">1</li>
			<li id="2">2</li>
			<li id="3">3</li>
			<li id="4">4</li>
			<li id="5">5</li>
			<li id="6">6</li>
			<li id="7">7</li>
		</ul>
	</div>
	<div class="icon_arrows">
		<img src="images/icon_arrows.png" width="30" height="30" />
	</div>
	<div class="listBlock">
		<ul id="sortable2" class="droptrue">
			<li id="8">8</li>
			<li id="9">9</li>
		</ul>
	</div>
</div>
 
$(function()
{
	$('.droptrue').on('click','li', function()
	{
		$(this).toggleClass('selected');
	});
 
	$("ul.droptrue").sortable(
	{
		connectWith: 'ul.droptrue',
		opacity: 0.6,
		revert: true,
		helper: function (e, item)
		{
			console.log('parent-helper');
			console.log(item);
			if(!item.hasClass('selected'))
				item.addClass('selected');
			var elements = $('.selected').not('.ui-sortable-placeholder').clone();
			var helper = $('<ul/>');
			item.siblings('.selected').addClass('hidden');
			return helper.append(elements);
		},
		start: function(e, ui)
		{
			var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
			ui.item.data('items', elements);
		},
		receive: function(e, ui)
		{
			ui.item.before(ui.item.data('items'));
		},
		stop: function(e, ui)
		{
			ui.item.siblings('.selectd').removeClass('hidden');
			$('.selected').removeClass('selected');
		},
		update: updatePostOrder
	});
 
	$("#sortable1, #sortable2").disableSelection();
	$("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");
	updatePostOrder();
});
 
function updatePostOrder()
{
	var arr = [];
	$("sortable2 li").each(function()
	{
		arr.push($(this).attr('id'));
	});
	$('#postOrder').val(arr.join(','));
}

Y me funciona muy bien la verdad, justo como quiero, ahora viene cuando la matan..

Necesito poder, en un momento dado, saber, recuperar, lo que haya en sortable2, para insertarlo en una DB, y también necesito poder introducir en sortable2 los datos de una DB, es decri, me hace falta leer y escribir en sortable2, para saber o meter, en cualquier momento cualquiera de las opciones que tengo en sortable1... no se si me habré explicado...

Por donde tengo que tirar? Que tengo que mirar?

Muchas gracias por todo..
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