AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / WLanguage / Funciones WLanguage / Controles, páginas y ventanas / Funciones de arrastrar y soltar
  • 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)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
HTML 5: Ejemplo de gestión de la función de arrastrar y soltar programada
Presentación
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:
  1. Definir las fuentes y los objetivos de Arrastrar y soltar.
  2. Declarar los eventos a gestionar.
  3. 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)
Actuar durante un Event

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:
  1. La acción de desplazamiento se acepta a través de DnDAccepto.
    PROCÉDURE Drop
    // Accept Drag and Drop
    DnDAccept(dndMove)
  2. 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
  3. 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
  4. 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()
Versión mínima requerida
  • Versión 17
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 23/06/2023

Señalar un error o enviar una sugerencia | Ayuda local