Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous

   difficoltà:  script script script script script

Demo
Download
Script simili
15/1/2007


Abbiamo visto nel precedente post: Aggiungere elementi a una pagina web con scriptaculous come aggiungere elementi ad una lista ordinabile di oggetti. Ora vediamo come modificare lo script per poter rimuovere gli elementi aggiunti.

ajax drag drop builder

Rispetto al precedente script la funzione rendisortable() resta uguale, sarà aggiunta una funzione rimuovi() per rimuovere l'elemento e modificata la funzione crea().

La funzione rimuovi():
function rimuovi(elemento){
$('firstlist').removeChild($('obj'+elemento));
rendisortable();
}
Alla funzione viene passata la variabile elemento che sarà l'id del DIV da eliminare.
removeChild funziona eliminando dall'elemento firstlist il nodo con id: 'obj'+elemento.

La funzione crea() viene modificata per poter inserire all'interno del div creato più elementi div annidati utilizzando il buider (vedi Aggiungere elementi a una pagina web con scriptaculous). Questo ci serve per poter dare uno stile diverso alla linguetta superiore, aggiungendogli quindi il tasto chiudi.
function crea(elemento){
if(!$('obj'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'obj'+elemento});
newtitle=Builder.node( 'div', {className:'handle'},'titolo '+elemento);
newchiudi=Builder.node( 'div', {className:'chiudi'});
newlink=Builder.node( 'a', {href:'javascript:rimuovi('+elemento+')', className:'chiudilink'},'x');

newitem.appendChild(newtitle);
newitem.appendChild(newchiudi);
newchiudi.appendChild(newlink);
$('firstlist').appendChild(newitem);

$('obj'+elemento).innerHTML=$('obj'+elemento).innerHTML+'contenuto '+elemento;
rendisortable();
}
}
Si vede come con appendChild appendo i div uno all'altro e poi il tutto al contenitore firstlist.
Si crea quindi dinamicamente il tasto chiudi che richiamerà la funzione rimuovi() per eliminare l'oggetto.

Ecco lo script completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Script ajax: Aggiungere elementi a una pagina web con scriptaculous</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/scriptaculous.js" type="text/javascript"></script>
<script src="ajax/unittest.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<script>
function crea(elemento){
if(!$('obj'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'obj'+elemento});
newtitle=Builder.node( 'div', {className:'handle'},'titolo '+elemento);
newchiudi=Builder.node( 'div', {className:'chiudi'});
newlink=Builder.node( 'a', {href:'javascript:rimuovi('+elemento+')', className:'chiudilink'},'x');

newitem.appendChild(newtitle);
newitem.appendChild(newchiudi);
newchiudi.appendChild(newlink);
$('firstlist').appendChild(newitem);

$('obj'+elemento).innerHTML=$('obj'+elemento).innerHTML+'contenuto '+elemento;
rendisortable();
}
}

function rimuovi(elemento){
$('firstlist').removeChild($('obj'+elemento));
rendisortable();
}

function rendisortable(){
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist"],constraint:false});
// ]]>
}
</script>
<body>

<a href="javascript:crea('1')">titolo 1</a> &nbsp;&nbsp;
<a href="javascript:crea('2')">titolo 2</a> &nbsp;&nbsp;
<a href="javascript:crea('3')">titolo 3</a> &nbsp;&nbsp;
<a href="javascript:crea('4')">titolo 4</a> &nbsp;&nbsp;
<a href="javascript:crea('5')">titolo 5</a> &nbsp;&nbsp;
<a href="javascript:crea('6')">titolo 6</a> &nbsp;&nbsp;
<a href="javascript:crea('7')">titolo 7</a> &nbsp;&nbsp;
<a href="javascript:crea('8')">titolo 8</a> &nbsp;&nbsp;
<a href="javascript:crea('9')">titolo 9</a> &nbsp;&nbsp;

<div class="container">
<div class="colonna">
<ul class="sortabledemo" id="firstlist">

</ul>
</div>
</div>

</body>
</html>
Ricordiamoci di caricare i file necessari di script.acoul.us nella cartella ajax.

Ecco invece il foglio di stile modificato style.css:
body{
font: 10px verdana;
}

div.container{
width:780px;
margin: 0px auto 0px;
overflow: hidden;
}

div.colonna{
float:left;
width:240px;
padding:10px;
}

ul.sortabledemo {
min-height:150px;
width:200px;
}

li.item {
height:50px;
border:1px solid #5788AF;
background-color: #A7C6DF;
list-style-type: none;
margin-left:-40px;
margin-bottom:15px;
}

div.handle {
float:left;
width: 224px;
height: 14px;
background-color: #5788AF;
color:white;
cursor: move;
}

div.chiudi {
float:left;
width: 14px;
height: 14px;
background-color: #00497F;
color:#ffffff;
text-align: center;
font-weight: bold;
}

a.chiudilink {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}





Commenti


  Francesco

2/1/2008 21:02:00

Ciao in primis ti ringrazio per il supporto che ci dai e che offri gratuitamente anche rispondendo ai nostri post.
Volevo chiederti, e spero tu abbia il tempo e la voglia di aiutarmi :), se e come quando creo il nuovo elemento dopo averlo eliminato cito il codice :


function crea(elemento){
if(!$('obj'+elemento)){
newitem=Builder.node( 'li', {className:'item',id:'obj'+elemento});
newtitle=Builder.node( 'div', {className:'handle'},'titolo '+elemento);
newchiudi=Builder.node( 'div', {className:'chiudi'});
newlink=Builder.node( 'a', {href:'javascript:rimuovi('+elemento+')', className:'chiudilink'},'x');


fosse possibile invece di href creare il comando onclick e più precisamente, sto cercando di utilizzare alcuni effetti grafici di scriptaculous, questo :

<a onclick="new Effect.SwitchOff('first-list_key<?=$array_colonna1[$elementi]?>');window.setTimeout('rimuovi(<?=$array_colonna1[$elementi]?>);crea(<?=$array_colonna1[$elementi]?>)' ,2500); " href="#" class="chiudilink">x</a>

grazie per una tua eventuale risposta e o chiarimento

Buon anno

Francesco Loddo

  Fabio

2/1/2008 21:35:33

Ciao Francesco,
buon anno anche a te.

Prova a dare un occhio qui:
Builder (da Open Ajax)

se vai alla voce esempio complesso c'è un esempio di aggionta di onclick.

  Francesco

2/1/2008 22:51:21

Grazie per il suggerimento Fabio ma continua a non funzionarmi anzi ti dirò di più mi si blocca tutto e gli elementi non sono più draggabili non capisco dove sbaglio ho provato a inserirlo in tutti i modi per ricrearlo ma si crea confusione con le ' .-.

Grazie per l'attenzione

Francesco

  Fabio

2/1/2008 23:31:17

hai provato all'onclick a non scrivere tutto il contenuto ma a richiamare una funzione esterna che si occupi di far tutto.
Cosi ti incasini meno

  Francesco

2/1/2008 23:43:56

una cosa del genere suggerisci :


<script type="text/javascript">
function chiuso(){
new Effect.SwitchOff('first-list_key<?=$array_colonna1[$elementi]?>');
window.setTimeout{
(rimuovi(<?=$array_colonna1[$elementi]?>);
crea(<?=$array_colonna1[$elementi]?>)) , 2500
}
}
</script>

anche se non credo la sintassi sia giusta

  Fabio

2/1/2008 23:53:10

esatto.
e poi quando crei l'elemento


newlink=Builder.node( 'a', {href:'javascript:void(0)', className:'chiudilink', onclick:'chiuso()'},'x');


se ti è comodo a chiuso() puoi passare dei paramentri in modo da usare sempre la stessa funzione, che poi è un po' quello che faccio io richiamando la funzione rimuovi.
Magari ti basta modificare solo quella aggungendo l'effetto che vuoi dare alla chiusura.

  Francesco

3/1/2008 0:17:09

Ok grazie per le dritte adesso sto provando a sistemare lo script esterno appena funziona lo posto magari può tornare utile a ad altri sempre se vuoi.
Per adesso mi sa che la notte è ancora lunga

Grazie ancora :)

  Francesco

3/1/2008 16:06:45

Ciao Fabio
ho provato a creare un metodo esterno in questo modo


<script type="text/javascript">

function chiuso() {
new Effect.Squish('first-list_key<?=$array_colonna1[$elementi]?>'); window.setTimeout('rimuovi(<?=$array_colonna1[$elementi]?>);
crea(<?=$array_colonna1[$elementi]?>)',2500);
}

</script>

e a richiamarlo poi nel tag a

<a onclick="chiuso()" href="javascript:void(0)" class="chiudilink">x</a>

ma a priori questo metodo non funziona :( sapresti suggerirmi una soluzione grazie in anticipo

Francesco

  Francesco

3/1/2008 22:24:26

Ciao Fabio ti scrivo per dirti che ho trovato la soluzione per lo script:


function chiuso(elemento) {
new Effect.SwitchOff('first-list_key'+elemento);
window.setTimeout('rimuovi('+elemento+')' , 1500 );
window.setTimeout('crea('+elemento+')' , 1500 );
}

sarà irrazionale ma per fortuna funziona.

Grazie ancora per il supporto

Saluti Francesco

  Francesco

5/1/2008 16:12:05

Ciao Fabio ecco una soluzione più logica per il mio problema


function chiuso(elemento)
{
new Effect.SwitchOff('first-list_key'+elemento);
setTimeout(function()
{
rimuovi(elemento);
crea(elemento);
} , 1500 );
}

grazie di tutto.

Adesso provo a parsare gli array php dal file .xml

  Camilla

6/3/2008 13:01:47

Ciao,
vorrei chiedere all' autore o a chi lo sa come modificare lo script in modo che i box vengano affiancati orizzontalmente anziche' verticalmente.
In pratica vorrei ottenere una lista orizzontale ordinabile anziche' una pila verticale ordinabile.
Grazie
Buona giornata


  Fabio

6/3/2008 14:11:13

guardato qui:

drag and drop orizzontale



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.