Proseguiamo il lavoro impostato nel precendete post e concretizziamo il drag&drop memorizzando le informazioni con opportune chiamate ajax.
Andremo ad aggiungere anche alcune funzionalità piuttosto comuni.
Ci portiamo nell’area droppable e aggiungiamo l’evento drop:
drop:function(event,ui){
var id=ui.draggable.attr(‘id’);
recuperiamo l’id dell’elemento trascinato, quindi lo mandiamo al server web per l’inserimento nel db:
$.ajax({
type:’GET’,
url:’dati/inserisci.php?id=’+id,
success:function(str){
if(str==’OK’){
se va tutto bene aggiungiamo l’elemento alla landing area, insieme a un campo quantità e a un link elimina:
if(str==’ok’){
$(‘<div id=”elemento_’+id+’”></div>’)
.append(ui.draggable.html())
.append(‘<input type=”text” id=”qt_’+id+’” value=”1″ /><br />’)
.append(‘<a href=”#’+id+’”>Elimina</a>’)
.appendTo(‘#landing_area’)
$(‘#’+id).fadeOut(2000);
}
infine nascondiamo l’elemento dalla lista dei draggable
Restano da gestire l’input della quantità e il link elimina.
Useremo il metodo live perché vengono creati runtime, anche se sarebbe preferibile usare on
Quindi procediamo con 3 operazioni relative all’elimina:
1. rimettiamo l’elemnto nella lista
2. lo rimuoviamo dalla landing area
3. lo cancelliamo dal database:
$(‘#landing_area a’).live(‘click’, function(){
var id=$(this).attr(‘href’);
$(id).fadeIn(2000);
$(this).parent().remove();
//rimuovere dal db
$.get(‘data/test.php?id=’+id,function(){/**/})
})
si noti la forimula this parente per rimuovere l’elemnto padre del link
Per quanto riguarda la quantità molto più semplicemente si tratta di fare un update:
$(‘#landing_area input’).live(‘blur’, function(){
var id=$(this).attr(‘id’);
var qt=$(this).val();
//aggiorna qt su db
$.get(‘data/test.php?id=’+id+’&qt=’+qt,function(){/**/})
})
quindi leggo i valori e li invio al server web.
L’esempio
