Hvordan lage en Div Droppable og sorterbar
Brukere av web-applikasjoner har sikkert sett droppable og sorterbar lister mange ganger uten å merke. En viktig sted hvor de vises i den "Widgets" skjerm inne WordPress, der brukerne kan dra widgets i sidefelt og deretter bestille dem. JQuery UI eller User Interface er en forlengelse av jQuery som legger denne evnen til nettsteder. Når du installerer både jQuery og jQuery UI, bruker pre-bygget "sorterbar ()" funksjonen for å lage to bokser sorterbar og koble dem.
Bruksanvisning
1 Åpne en webside i Notepad eller en kode editor og legge disse "<script>" tags over avsluttende "</ head>" tag:
<script tags legge til eksterne Javascript-filer ligger på Googles servere. Du trenger denne koden for å få jQuery biblioteket og jQuery UI forlengelse innebygd i din webside.
2 Gå ned til "<body>" tags på websiden og legge til to divs med så mange nestede divs som du trenger:
<Div id = "sortme1" class = "koblet">
<Div> Sak 1 </ div>
<Div> Sak 2 </ div>
<Div> Sak 3 </ div>
<Div> Sak 4 </ div>
</ Div>
<Div id = "sortme2" class = "koblet">
</ Div>
Den andre div er tom fordi dette er den boksen der du vil slippe elementer og sortere dem.
3 Legg noen stiler mellom "<style>" koder i hodet av HTML-kode:
sortme1, sortme2 {
float: left;
}
sortme1 div, sortme2 div {
width: 100px;
height: 20px;
padding: 10px;
margin: 10px;
bakgrunn: # 555;
farge: #fff;
list-style: none;
}
sortme2 {
width: 200px;
height: 300px;
padding: 10px;
margin: 10px;
bakgrunn: #eee;
}
Disse stilene posisjon og farge dine flyttbare listeelementer og droppable boksen.
4 Start script med en funksjon som sjekker om når siden er ferdig lasting i nettleseren:
<Script type = "text / javascript">
$ (Funksjon () {
});
</ Script>
Skriv resten av skriptet mellom klammeparentes vist i eksempelet ovenfor.
5 Velg begge sorterte lister og og fest "sorterbar ()" -funksjon. Legg til "connectWith: '.connected'" innsiden "sorterbar ()" for å koble de to listene. Avslutt funksjonen med "disableSelection ()" slik at brukerne ikke kan markere tekst i elementene, som noen ganger gjør det vanskeligere å klikke og dra dem:
$ ( '# Sortme1, # sortme2') .sortable ({
connectWith: '.connectedSortable'
}) DisableSelection (.);