Come muovere i pezzi sulla scacchiera utilizzando JQuery UI ed evitare un salto di 828 metri dal Burj Khalifa: istruzioni per l’uso

Wow, é arrivato non l’arrotino ma https://www.farwebdesign.com/projectcsshtmljs/ . Diciamocelo la vita di un FrontEndDeveloper è fatta di sconfitte perché senza perdere una battaglia non si potrebbe vincere una guerra. Prendiamo l’esempio https://www.farwebdesign.com/projectcsshtml/ che era stato messo in piedi per studiare l’implemetazione della fantastica libreria grafica FONT-AWESOME, https://fontawesome.com/ . Bella ma adesso come li muovo i pezzi, spesso si sente dire dai profani l’espressione, ma adesso come le muovo le pedine? Per l’interazione sulla pagina esistono javascript e jquery, esiste un DOM, esistono dei metodi che lavorano sui nodi dell’ oggetto WINDOW (la finestra del browser che contiene elementi figli). Così dopo diverse battaglie combattute sbattendo il naso su una soluzione che non arrivava, umbriaway consulting arriva a forgiare la sua fantastica solution e cioé https://www.farwebdesign.com/projectcsshtmljs/ passando prima per un paio di tappe intermedie di studio, una sul ciclo FOR con l’idea che le colonne e le scacchiere sono da implementare dinamicamente e non in maniera statica con un editor, vedere https://umbriawaydeveloper.wordpress.com/2020/05/22/come-salvarsi-con-un-ciclo-for-in-php-quando-non-vuoi-ricordarti-le-tabelline-a-memoria-perche-stai-usando-il-tempo-in-aula-a-fare-una-lista-dei-film-piu-brutti-di-ogni-tempo-che-ti-e-toccato-vedere-e/ , passando infine su Ken Shirov e il suo metodo per salvare il mondo, ossia utilizzare il metodo DRAG and DROP tradizionale del trascina e rilascia, vedere https://www.umbriaway.eu/2020/05/23/una-giornata-tipo-di-ken-shiro-salvare-il-mondo-con-javascript-e-il-drag-and-drop/ ; a questo punto la questione rimaneva sempre meno irrisolta, ma un pochino meno nebulosa in quanto l’ultimo articolo citato riportava delle idee di soluzione che erano a portata di naso! E indovinate chi ha fatto il lavoro sporco: LA LIBRERIA JQUERY USER INTERFACE all’ indirizzo https://jqueryui.com/draggable/ che tuttavia presenta una soluzione che non risolve completamente il problema del movimento globale, in quanto l’esempio è calzante solo per un elemento. Come trasformare quindi in movimento corale il movimento di ogni singolo componente del gioco degli scacchi? La risposta alla fine era dentro di me e l’ho usata! Ma procediamo per gradi:

“jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice”

In sostanza siamo di fronte a una libreria più leggera e ripulita rispetto a JQuery classic version, dedicata solo all’interazione degli utenti sulle pagine, quindi appositamente sagomata su esigenze pratiche rispetto a problematiche tra le più svariate, tra cui anche quella del movimento degli oggetti, la cui funzionalità con l’esempio pratico è stata già citata in https://www.umbriaway.eu/2020/05/23/una-giornata-tipo-di-ken-shiro-salvare-il-mondo-con-javascript-e-il-drag-and-drop/ . Analizziamo il codice presentato da JQuery UI per il trascinamento:

<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>jQuery UI Draggable – Default functionality</title>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
<script>
$( function() {
$( “#draggable” ).draggable();
} );
</script>
</head>
<body>

<div id=”draggable” class=”ui-widget-content”>
<p>Drag me around</p>
</div>

L’effetto finale è quello di riuscire a portare a spasso per la pagina il proprio elemento grafico o testo racchiuso all’ interno di un blocco divisore contrassegnato dal TAG <DIV> quindi la soluzione è perfetta per noi senonché analizzando il codice, ci accorgiamo che le marcature su elementi multipli sarebbe impossibile perché le scienze informatiche sono nate per ridurre le moli di lavoro e automatizzare i processi (vedi ciclo FOR per esempio) e andare a marcare ognuno dei 32 elementi presenti come pezzi su una scacchiera andando a definire altrettante funzioni sarebbe uno schiaffo al buon senso. Quindi????? Don’t worry, keep calm! JQuery funziona con la logica delle gabbiette per i canarini, vedi nello specifico $( “#draggable” ).draggable(); che significa afferra l’uccellino che sta nella gabbietta di nome id = “draggable” e rendilo partecipe del metodo che lo trascina. Questo però per un solo elemento! Allora la soluzione è arrivata come un fulmine dal cielo, tanto per citare una famosa colonna sonora di Ken il guerriero. Se io aviluppassi tutti i singoli elemento grafici con tanti piccoli contenitori o gabbiette che però hanno lo stesso nome, non potrei semplicemente fare lo stesso, richiamare una volta solo tutta la miriade di oggetti racchiusi da un <div> e sottoporli allo stesso trattamento? Detto fatto, dopo aver aggiunto i 32 DIV a corredo che ovviamente hanno la particolarità del trascinamento con <div id=”draggable” class=”ui-widget-content”> è bastato semplicemente includere una piccola trasformazione grazie alla versatilità e alla potenza offerta da JQuery e il gioco è fatto, con $( “div” ).draggable() . Risultato finale e soluzione trovata dopo alcuni tentativi di suicidio simbolici, perchè si potrà anche perdere una battaglia ma dopo una bella mangiata e una sana dormita, l’esercito è pronto per vincere definitvamente la guerra: https://www.farwebdesign.com/projectcsshtmljs/. Ok ma tutta questa elucubrazione e tecnologia serve a qualcosa, sì a studiare delle partite di scacchi di grandi campioni della disciplina senza utilizzare delle librerie esistenti come https://www.farwebdesign.com/playchess/. Quando qualcosa mangia qualcos’ altro mi basta solo spostare il pezzo mangiato fuori dell’ area di gioco e persino se voglio posizionare altrove la scacchiera tutta intera da un’ altra parte lo posso fare! Ma la vera conclusione di questo posto è un altra: attenti alla libreria per le interazioni dinamiche utente https://jqueryui.com/, fa delle cose fantastiche!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...