|
|
|
|
- Presentación
- Definir las fuentes y los objetivos
- Declarar los eventos a gestionar
- Actuar durante un Event
- Colocando el cursor sobre el objetivo
- Drop of Drag and Drop (Arrastrar y soltar)
HTML 5: Ejemplo de gestión de la función de arrastrar y soltar programada
Para hacer un sitio WEBDEV más interactivo, tiene la posibilidad de implementar la función de arrastrar y soltar en las páginas. Los pasos para implementar un arrastrar y soltar programado son los siguientes: - Definir las fuentes y los objetivos de Arrastrar y soltar.
- Declarar los eventos a gestionar.
- Actuar durante los eventos.
Observaciones: - Arrastrar y soltar en HTML 5 es compatible con los navegadores Chrome y Firefox (en el momento de escribir esta Page).
- Atención: Arrastrar y soltar en HTML 5 no se puede utilizar en los sitios mostrados en un móvil. De hecho, la tecnología utilizada no puede marcar la diferencia entre una acción de arrastrar y soltar y un gesto en el móvil..
- Esta ayuda Page se basa en el ejemplo "WW_Drag_n_Drop_HTML5" proporcionado con WEBDEV.
Definir las fuentes y los objetivos El primer paso consiste en identificar los controles que se utilizarán en las operaciones de arrastrar y soltar. En nuestro ejemplo, encontrará: - 3 controles "fuente: estos 3 controles muestran las imágenes de los extintores. En el código de inicialización de estos controles (código del servidor), el DndSource Property especifica que estos controles son los controles de origen para un Drag and Drop programado.
// Indicates that the control is source for Drag and Drop MySelf.DndSource = dndProgram
- 1 "destino" control: es la Image del avión. El DndTarget Property se utiliza en el código de inicialización de este control (código del servidor).
// Indicates that the control is target for Drag and Drop MySelf.DndTarget = dndProgram
Declarar los eventos a gestionar DnDEvent se utiliza para definir los eventos gestionados durante el Drag and Drop. Esta función espera como parámetro: - el nombre de la WLanguage Procedure que se ejecutará cuando se active la Event.
- el control sobre el cual debe ser administrado el Event. Tiene la posibilidad de especificar una control o todas las control de la página.
- el Event para gestionar. Hay varios eventos disponibles: principio y fin del Drag and Drop, entrada y salida del objetivo control, pasar por encima del objetivo control y soltar sobre el objetivo control. Estos eventos se identifican mediante constantes (dndXXX).
En nuestro ejemplo se soportan dos eventos: rollover y drop. // Enables Drag and Drop on the image of the plane DnDEvent(Rollover, IMG_PLANE, dndDragOver) DnDEvent(Drop, IMG_PLANE, dndDrop)
Colocando el cursor sobre el objetivo La Procedure "Rollover" se activa cuando el usuario pasa el ratón por encima de la zona de destino al arrastrar y soltar.. En nuestro caso, durante el rollover, el cursor se modifica para especificar al usuario que la acción está permitida por el Drag and Drop en este objetivo control. Para ello, utilice la función DnDCursor con la constante dndMove. PROCEDURE HoverOver // Modifies the cursor DnDCursor(dndMove)
Drop of Drag and Drop (Arrastrar y soltar) Se realizan varias acciones durante la caída: - La acción de desplazamiento se acepta a través de DnDAccepto.
PROCÉDURE Drop // Accept Drag and Drop DnDAccept(dndMove)
- La posición del cursor se recupera mediante las variables _DND.MouseXPos y _DND.MouseYPos..
Estas variables devuelven la posición del cursor durante la caída en el objetivo.
// Stores the cursor position nXImage = _DND.MouseXPos nYImage = _DND.MouseYPos
- También se recupera la fuente control de "Drag and Drop. Según el control de origen, se almacenará la associated color para el dibujo.
// Retrieves the source control sExtinguisherID = _DND.SourceControl // The color differs according to the selected extinguisher SWITCH sIDExtinguisher CASE IMG_EXTINGUISHER.Name nColor = 255 CASE IMG_EXTINGUISHER1.Name nColor = 3243262 CASE IMG_EXTINGUISHER2.Name nColor = 65535 OTHER CASE nColor = 16706050 END
- Todos los datos (coordenadas, color, tamaño) se almacenan en un array para que puedan reutilizarse cuando DrawAll realiza el dibujo Procedure.
// Saves the coordinates sCoordinates = sExtinguisherID + TAB + nXImage + TAB + nYImage + TAB + ... EDT_SLIDER + TAB + nColor // Saves the information gnCurrentIndex++ garrListCoordinates[gnCurrentIndex] = sCoordinates // Draws the extinguishers on the plane DrawAll()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|