Utilizzo del trascinamento della selezione nei siti Web?

Question

Come vorrei ora sviluppare migliori webapps quindi i php e javascript di base che attualmente creo, mi piacerebbe sapere come gli sviluppatori web creano alcuni dei fantastici siti web che ho usato negli ultimi anni.

Ad esempio, in alcuni dei siti Web che visito hanno la possibilità di trascinare elementi da una tavolozza sulla pagina Web. Sto pensando principalmente ad alcuni degli strumenti di diagrammi online che ho visto. Come fanno questo perché sono attualmente sconcertato.

Vorrei iniziare a creare questi tipi di siti Web e attualmente non ho idea di come procedere. Innanzitutto desidero creare alcuni siti Web di tester di piccole dimensioni che consentano l'uso di trascinamento e rilascio molto semplice.

Se qualcuno potesse indicarmi le giuste direzioni in termini di collegamenti a tutorial o biblioteche che hanno questa funzione, sarei molto grato.

Cheers.

Answer 1

Per quanto riguarda un semplice trascinamento della selezione, è possibile fare qualcosa come hai detto con una tavolozza e una finestra di dialogo che cambia colore in base alla caduta.

Vorrei raccomandare il framework jQuery in quanto è molto facile da usare e ha un ottimo API.

La procedura per la prova stessa sono abbastanza semplici:

Avere una tavolozza con i colori: [ ][ ][ ][ ][ ] Questi possono essere le celle della tabella (<td>) che è possibile fare clic su e 'trascinare'.

Si potrebbero fare tabelle e quando si fa clic su una delle tabelle, si usa jQuery per ottenere il colore di sfondo. Quando fai effettivamente clic su <td>, assegna il colore a una variabile.

È possibile creare un <div> semitrasparente che segue il mouse mentre lo si trascina.

Impostare un mouseup ascoltatore sul bersaglio <div> (quello che avrebbe cambiare il colore) e hanno jQuery impostare lo sfondo della <div> al colore nella variabile.

Modifica: quando si trascina qualcosa, si verificherà un leggero problema con la selezione del testo. Una correzione può essere trovata qui: How to disable text selection highlighting using CSS?

Answer 2

jQuery è facile da apprendere (ma non sono sicuro al 100% che funzioni DnD). Personalmente mi piace lo MochiKit, che ha un'eccellente funzionalità di trascinamento della selezione, e anche lo Dojo è molto buono (e ha alcuni fantastici widget).

Answer 3

può essere fatto utilizzando l'interfaccia utente jquery

Draggable

Droppable

Answer 4

La migliore, più a prova di futuro (in termini di immunità ai cambiamenti del browser e aggiornamenti) modo per implementare drag/drop è utilizzare la tecnologia dei veri rich client (RIA) come Adobe Flex, Silverlight o JavaFX.

Answer 5

Penso che dovresti considerare lo sviluppo in GWT che è fondamentalmente un wrapper basato su Java per Javascript.Ha un sacco di supporto per la comunità e un supporto drag and drop completo è disponibile sotto forma di libreria - http://code.google.com/p/gwt-dnd/

Poiché GWT sta codificando in Java, non è davvero un nuovo territorio da avventurarsi ma la conoscenza di Javascript, css, html va molto avanti nella costruzione di una robusta applicazione GWT. Inoltre ti permette di eseguire il debug del tuo codice in eclissi proprio come il codice Java.