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:
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..
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
0