2012-09-23 19 views
7

Sto usando jQuery Draggable nell'applicazione che creo e mi chiedo se sarebbe possibile in qualche modo creare una linea tra la finestra di dialogo e l'elemento sul sito web? Voglio che segua la finestra trascinabile mentre la trascini.È possibile creare una linea tra gli elementi in CSS3?

Sto cercando il modo CSS/HTML e non il modo jQuery/JS. Se non v'è alcun modo per creare utilizzando CSS3 puro/HTML5, allora inizierò con l'approccio JS - Volevo solo sapere :)

enter image description here

+3

Non è possibile utilizzare la tela senza javascript. –

+0

@dystroy Peccato, ma grazie per aver chiarito! Quindi penso che sia il mio unico modo per conoscere il canvas HTML5 e crearlo usando la soluzione canvas JS/HTML5. – Atadj

+0

Certo che è possibile. Gli eventi del mouse forniscono informazioni sul cursore in tempo reale e la tela consente di dipingere linee corrispondenti. Consiglio di investire un po 'di tempo in un tutorial su tela. –

risposta

10

In sostanza: no, non v'è un modo per ottenere questo usando solo i CSS.

Ma, se questo viene osservato come un indovinello CSS (ti consiglio di non utilizzare la seguente soluzione in nessuna applicazione del mondo reale), potresti ottenere qualcosa di simile. Di nuovo, questo sarà completamente offensivo sia per HTML che per CSS.

Fondamentalmente si crea molto divs, ognuno corrisponde a un "pixel". È possibile modificare e mantenere lo background-color dopo lo stato :hover utilizzando un (ancora un altro abuso) transition trucco (ritardo pseudo-infinito).

Ecco una demo: little link. Prova a passare il mouse sulle parti in alto per vedere i "breadcrumb" che vengono disegnati mentre muovi il mouse.

I, ancora una volta, questo è esagerato e non dovrebbe essere utilizzato in nessuna applicazione reale.

Questo può essere espanso per creare un piccolo programma di pittura usando CSS. Ho fatto un po 'dabblet per illustrare: another little link (provate disegno cliccando e spostando il mouse!)

La linea di fondo: Usa JavaScript - è l'unico resort in questo caso (non si può controllare un canvas senza JavaScript).

+1

+1 per pazza mod :-) – Bergi

+0

Puoi usare canvas per questo o svg even. – Jigar7521

Problemi correlati