jQuery drag&drop (2)

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