Tecnología

Inicio

Cómo hacer un Soltable Div y Sortable

August 15

Los usuarios de aplicaciones Web, probablemente han visto listas lanzables y se pueden ordenar muchas veces sin darse cuenta. Un lugar destacado en la que aparecen en la pantalla de "Widgets" dentro de WordPress, donde los usuarios pueden arrastrar widgets en las barras laterales y luego volver a pedir ellos. JQuery UI o interfaz de usuario es una extensión de jQuery que añade esta capacidad a los sitios web. Una vez que instale tanto jQuery y jQuery UI, utilice el ") ordenable (" función de pre-construidos para hacer dos cajas pueden ordenar y conectarlos.

Instrucciones

1 Abrir una página Web en el Bloc de notas o un editor de código y añadir estas "<script>" etiquetas por encima de la etiqueta de cierre "</ head>":

<etiquetas script añadir archivos JavaScript externos alojados en los servidores de Google. Usted necesita este código para obtener la biblioteca jQuery y la extensión de jQuery UI incrustado en su página web.

2 Bajar a la "<body>" etiquetas de la página web y añadir dos divs con tantos divs anidados como sea necesario:

<Div id = clase "sortme1" = "conectado">

<Div> Artículo 1 </ div>

<Div> Artículo 2 </ div>

<Div> Artículo 3 </ div>

<Div> Artículo 4 </ div>

</ Div>

<Div id = clase "sortme2" = "conectado">

</ Div>

El segundo div está vacío porque esta es la caja donde se soltarán objetos y ordenarlos.

3 Añadir algunos estilos entre "<style>" etiquetas en la cabeza del código HTML:

sortme1, sortme2 {

flotador izquierdo;

}

div sortme1, div {sortme2

Anchura: 100px;

altura: 20px;

padding: 10px;

margen: 10px;

background: # 555;

Color: #fff;

list-style: none;

}

sortme2 {

Anchura: 200px;

altura: 300px;

padding: 10px;

margen: 10px;

fondo: #eee;

}

Estos estilos posición y el color se pueden arrastrar los elementos de lista y el cuadro de lanzables.

4 Al principio del script con una función que comprueba cuando la página termine de cargar en el navegador:

<Script type = "text / javascript">

$ (Function () {

});

</ Script>

Escribe el resto de la secuencia de comandos entre las llaves que se muestran en el ejemplo anterior.

5 Seleccione ambas listas desordenadas y y adjuntar el ") ordenable (" función. Agregar "connectWith: '.connected'" dentro "ordenable ()" para conectar las dos listas. La función se termina con "disableSelection ()" para que los usuarios no pueden resaltar texto en los artículos, que a veces hace que sea más difícil de hacer clic y arrastrar ellos:

$ ( '# Sortme1, # sortme2') .sortable ({

connectWith: '.connectedSortable'

}) DisableSelection (.);