Recursos de Dreamweaver CS4

Aplicación del comportamiento Arrastrar elemento PA

El comportamiento Arrastrar elemento PA permite al visitante arrastrar un elemento con posición absoluta (PA). Use este comportamiento para crear puzzles, controles deslizantes y otros elementos móviles de interfaz.

Se puede especificar la dirección en la que el visitante puede arrastrar el elemento PA (en horizontal, vertical o en cualquier dirección), un destino hasta el que el visitante debe arrastrar el elemento PA, si el elemento PA debe ajustarse al destino cuando el elemento PA se encuentra a un cierto número de píxeles del destino y qué sucederá cuando el elemento PA llegue al destino, entre otras opciones.

Dado que la llamada al comportamiento Arrastrar elemento PA debe producirse antes de que el visitante pueda arrastrar el elemento PA, debe asociar Arrastrar elemento PA al objeto body (con el elemento onLoad).

Seleccione Insertar > Objetos de diseño > Div PA o haga clic en el botón Dibujar Div PA del panel Insertar y dibuje una Div PA en la vista Diseño de la ventana del documento.
Haga clic en <body> en el selector de etiquetas, situado en la esquina inferior izquierda de la ventana de documento.
Seleccione Arrastrar elemento PA en el menú Añadir comportamiento del panel Comportamientos.
Si Arrastrar elemento PA no está disponible, es probable que tenga un elemento PA seleccionado.
En el menú emergente Elemento PA, seleccione el elemento PA.
Seleccione Restringido o Sin restricción en el menú emergente Movimiento.
El movimiento no restringido es adecuado para puzzles y otros juegos de arrastrar y soltar. Para los controles deslizantes y los escenarios móviles, como cajones de archivos, cortinas y minipersianas, elija movimiento restringido.
Para movimiento restringido, introduzca valores (en píxeles) en los cuadros Arriba, Abajo, Derecha e Izquierda.
Los valores son relativos a la posición inicial del elemento PA. Para restringir el movimiento a una región rectangular, introduzca valores positivos en los cuatro cuadros. Para permitir solamente el movimiento vertical, introduzca valores positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permitir sólo el movimiento horizontal, introduzca valores positivos para Izquierda y Derecha, y 0 para Arriba y Abajo.
Introduzca valores (en píxeles) en los cuadros Izquierdo y Superior para definir el destino de la capa.
El destino es el punto hasta el que el visitante debe arrastrar el elemento PA. Se considera que un elemento PA ha alcanzado el destino cuando sus coordenadas izquierda y superior coinciden con los valores introducidos en los cuadros Izquierdo y Superior. Los valores son relativos a la esquina superior izquierda de la ventana del navegador. Haga clic en la opción Obtener posición actual para rellenar automáticamente los campos con la posición actual del elemento PA.
Introduzca un valor (en píxeles) en el campo Ajustar si a menos de para determinar a qué distancia del destino el visitante debe soltar el elemento PA para que ésta se ajuste al destino.
Los valores altos facilitan al visitante la localización el destino para soltar la capa.
Para obtener puzzles sencillos y manipulación de escenarios, puede detenerse aquí. Para definir el manejador de arrastre del elemento PA, controlar el movimiento del elemento PA mientras se arrastra y desencadenar una acción al soltar el elemento PA, haga clic en la ficha Avanzado.
Para definir una zona determinada del elemento PA en la que el visitante debe hacer clic para arrastrarlo, elija Área dentro del elemento en el menú Arrastrar selector; luego introduzca las coordenadas izquierda y superior, así como los valores de ancho y alto del selector de arrastre.
Esta opción resulta útil cuando la imagen contenida en el elemento PA incluye un elemento que sugiere la posibilidad de arrastrarla, como una barra de título o un asa de cajón. No establezca esta opción si desea que el visitante pueda hacer clic en cualquier lugar del elemento PA para arrastrarlo.
Elija las opciones Al arrastrar que desee utilizar:
- Seleccione Traer el elemento al frente si el elemento PA debe desplazarse a la primera posición en el orden de apilamiento mientras se está arrastrando. Si selecciona esta opción, utilice el menú emergente para determinar si desea dejar el elemento PA en la primera posición o devolverlo a su posición original en el orden de apilamiento.
- Introduzca código JavaScript o un nombre de función (por ejemplo, monitorAPelement()) en el cuadro Llamar JavaScript para ejecutar repetidamente el código o función mientras se esté arrastrando el elemento PA. Por ejemplo, podría escribir una función que controle las coordenadas del elemento PA y muestre mensajes y consejos como “ya está cerca” o “está lejísimos del destino donde soltar la capa” en un cuadro de texto.
Introduzca código JavaScript o un nombre de función (por ejemplo, evaluateAPelementPos()) en el segundo cuadro de texto Llamar JavaScript para ejecutar el código o la función cuando se suelte el elemento PA. Seleccione la opción Sólo si se ajusta cuando el código JavaScript deba ejecutarse solamente si el elemento PA ha alcanzado su destino.
Haga clic en Aceptar y compruebe que el evento predeterminado es el correcto. Si no lo es, seleccione otro evento o cambie el navegador de destino en el submenú Mostrar eventos para.