¿Cuál es la esencia de la tecnología de arrastrar y soltar? Elementos de arrastrar y soltar (arrastrar y soltar)

Uso de la tecnología arrastrar (arrastrar y soltar.) Le da al usuario a mover varios objetos de uno a otro, por ejemplo, elementos de una lista a otra. Para hacer esto, use dos controles: receptor y fuente. El receptor es el objeto que un objeto recibirá un objeto (objeto en movimiento).

Los eventos que surgen en el proceso de mudanza se enumeran en el orden en que surgen.

OnStartDrag. (TYTARDRAGEVENT TIPO) - Al comienzo de la operación, la operación es generada por el objeto de origen. Los parámetros que se transmiten al controlador de eventos: el objeto del receptor de DragObject (Tipo TDRagobuct), la fuente del objeto de origen (Tipo de TOGIPT).

Ondragover (Tipo TRAGOVERVENTE): crea un objeto receptor cuando el objeto se está moviendo por encima de él. Parámetros que se transmiten al manejador de eventos: Objeto del remitente (Tipo de TOGIPT), fuente de objeto Fuente (Tipo de tipo), Estatua de estado del estado (Tipo TDRagstate), X e Y (Tipo Integer) - Coordenadas de puntero de ratón actual, aceptan (tipo booleano) Signo de confirmación de la operación de movimiento. El estado de movimiento hace posible entender si el objeto movido en el área del receptor se está moviendo, lo dejó. Los parámetros transmitidos permiten al objeto receptor aceptar o rechazar la fuente de origen. El parámetro Aceptar está configurado para probar si se acepta el movimiento, de lo contrario falso.

ondragDrop (TDRAGDROPEVENT TYPEVENT): es creado por el objeto del receptor cuando el objeto en movimiento se reduce en él. El manejador de eventos se transmite a las coordenadas actuales del puntero del mouse, el objeto del receptor del remitente (Tipo TOGIPT), el objeto de origen de la fuente de movimiento (tipo toBject).

oNENDDRAG (TypedDDageVent): creado cuando se completa la operación de arrastrar y soltar. El manejador de eventos de la coordenada X e Y del punto donde la fuente del remitente resultó ser la fuente y el objeto del receptor de destino.

Para hacer arrastrar y soltar, es suficiente para implementar dos eventos: OnDragDrop y Ondragover cuando la propiedad Dragmode se instala igual a DMAutomatic. De lo contrario, el inicio de la operación del movimiento, el método de BegindRag, es necesario codificar el programador.

Para asegurar el material, cree la siguiente aplicación. En forma de componente del panel. En la propiedad Dragmode del inspector de objetos, configure el valor dmautomatic. Resaltamos el formulario de objeto y usamos el inspector de objetos creará los siguientes eventos:

Procedimiento TForm1.FormDRAGOVER (Remitente, Fuente: TOGECT; X, Y: Integer; Estado: TDRagstate; VAR Acepta: Boolean); Comience si la fuente \u003d panel1, luego acepte: \u003d Verdadero más acepta: \u003d FALSO; final; Procedimiento TForm1.FormDRAGDROP (remitente, fuente: TOGECT; X, Y: Integer); Comienza el panel1.left: \u003d x; Panel1.top:\u003d y; final;

Ahora ejecuta la aplicación y presionando el botón del mouse en el panel, podemos mover el objeto del panel a través del formulario.

Resultado: Nos familiarizamos con la tecnología. arrastrar (Arrastre y suelte) y lo usó en la práctica.

Los métodos para trabajar con la técnica de "arrastrar y lanzar" se formaron durante muchos años. No es sorprendente que con un aumento en el número de programadores que desarrollen complementos con abierto código fuente (Por ejemplo, para jQuery) Los métodos antiguos vuelven a renacer. La biblioteca JavaScript es muy adaptable y ofrece muchas mejoras en nuestra era de tecnologías web.

En esta lección, haremos un script que se pueda usar para crear rectángulos dinámicos con la técnica de "gotas y tirar" en su sitio web. El proceso está controlado por jQuery. ¡Dichos scripts conservan el tiempo al proporcionar una funcionalidad preparada! Y la biblioteca "arrastre y tiro" se puede utilizar en otros proyectos.

Preparar contenido

En primer lugar, prepararemos un pequeño sitio para el proyecto. En la carpeta del proyecto, debe crear dos catálogos con nombres notables. "js" y "CSS" y archivo vacío index.html . El código será muy sencillo de hacer una idea clara de trabajo, y un punto apareció para un mayor desarrollo.

A continuación se muestra el código de nuestro Archivo html.. En capitulo cabeza. Encendemos 3 scripts. El principal guión jquery se reservará desde el servidor de códigos de Google. Nuestro archivo de estilo STYLE.CSS también está conectado, que contiene propiedades básicas para formar vista externa Nuestro documento.

Sección interior cuerpo. solo se colocan dos bloques divque contienen ambos rectángulos. El código es bastante simple y comprensible. Dentro de cada rectángulo colocado encabezados con clases. manipulador y handler2.. Esto es importante, ya que al arrastrar cada rectángulo se comporta a su manera.

Instale CSS.

El código HTML es muy simple. Si las principales marcas están claras para usted, entonces estilos CSS. También no representará dificultades. Básicamente, se determinan campos, sangrías y colores.

Cuerpo, HTML (FONT FAMILY: Calibri, Sans-Serif; Fondo: # EAF3FB; Tamaño de fuente: 12px; Altura: 1000px; Altura de la línea: 18px;) P (altura: 30px;)

Selectores cuerpo, HTML. Se utiliza solo para una página de demostración. Y todo el contenido se encuentra en dos rectángulos de arrastre.

DV1 (Ancho: 200px; Fondo-color: # Eff7FF; Frontera: 1px sólido # 96c2f1; Posición: Absoluta; Izquierda: 100px; Top: 100px;) .dv1 h2 (color de fondo: # b2d3f5; relleno: 5px; font- Familia: Georgia, "Times New Roman", Times, Serif; Tamaño de fuente: 1.0em; Transformación de texto: Mayor; FONT-PESO: BOLD; Color: # 3A424A; Margen: 1px; Cursor: Move;) .dv1 div (Relleno: 5px; margen inferior: 10px;) .dv2 (fondo-color: # f7ebfb; borde: 1px sólido # a36fde; Ancho: 550px; Posición: Absolute; Cursor: Move; Izquierda: 400px; Top: 230px; .Dv2 h2 (fondo de fondo: # eacfe9; espacio-espacio: -0.09EM; Tamaño de fuentes: 1.8EM; FONT-PESO: BOLD; PADDIENTO: 15px; Margen: 1px; Color: # 241F24; CURSOR: Mover;) .dv2 .content2 (relleno: 5px; margen inferior: 10px;)

Para ambas clases.dv1 i.dv2, usamos el posicionamiento absoluto. Esto no es necesario y probablemente no sea el más. la mejor manera Para colocar los rectángulos sin arrastre. Sin embargo, para nuestro ejemplo, dicha posicionamiento tiene sentido, ya que cada vez que se instalan los rectángulos de la página en ciertos lugares.

También las fuentes y los colores difieren para los rectángulos para que sea más fácil ver la diferencia.

El resto de los encabezados y el contenido de los bloques son casi idénticos. Si copia estilos en su proyecto, cambie los nombres antes de ejecutar. En algunos casos, será más lógico usar la ID en lugar de clases, por ejemplo, cuando se usa las técnicas de "Arrastrar y lanzar" para un bloque en particular.

Desmontamos JavaScript

Dos archivos JavaScript contienen todo el código que necesita. Bajamos los detalles del trabajo con jQuery, ya que va más allá de la lección. Preste atención al archivo jquery.dragnndrop.js.

La función se determina en la línea 22. Arrastra..

$ .FN.DRAGS \u003d FUNCIÓN (OPTS) (VAR PS \u003d $. XIXEND (ZINDEX: 20, Opacidad: .7, Handler: NULL, ONMOVE: Función () (), OnDrop: Función ()), OPT) ;

Aquí la variable devuelta y los datos de inicialización se establecen para Arrastra.. Este método se usa muy ampliamente cuando se trabaja con jQuery para transferir opciones a otras funciones. En el interior, establecemos las variables para todas las opciones disponibles para arrastrar rectángulos.

La siguiente parte del código incluye los manipuladores de eventos para la variable. dragndrop.. Ambos eventos arrastrar. y soltar. Funciones de llamada con la transferencia de parámetros de eventos en ellos. Estos eventos ocurren cuando hace clic en el botón del mouse para arrastrar el objeto y luego liberarlo.

Var dragndrop \u003d (dragdata \u003d e.data.dragdata; dragdata.target.css ((izquierda: dragdata.left + e.pagex - dragdata.offleft, top: dragdata.top + e.pagey - dragdata.offtop); dragdata .handler.css ((cursor: "Move")); dragdata.target.css ((cursor: "mover"); dragdata.onmove (e);), gota: función (e) (var dragdata \u003d e. data.dragdata; dragdata.target.css (dragdata.oldcssss); //. CSS (("Opacidad": "")); dragdata.handler.css ("cursor", dragdata. oldcss.cursor); dragdata.ondroduce (E); $ (). Desbordamiento ("Mousemove", dragndrop.drag) .unbind ("mousepuleup", dragndrop.drop);))

Nuestras funciones manipulan CSS posicionando cada objeto. Si cambia el posicionamiento absoluto de sus objetos, no afectará la operación del código, ya que cada función JavaScript cambia de estilo que se define para el objeto.

El código resto se revisa para el controlador y los cambios cosméticos de otros estilos. Aquí puede agregar un cambio en la transparencia, la fuente y sus colores, o agregar nuevos párrafos.

Funciones de arrastrar / soltar

El segundo archivo FN.JS contiene un código simple. Esperamos la descarga completa del documento, después de lo cual llamamos a nuestras funciones. Se determinan dos instancias de la función. Arrastra.que se entendió antes.

Tenemos dos bloques movidos con clases.dv1 i.dv2. Si necesita dejar un bloque en movimiento, solo necesita eliminar la segunda parte del código. Añadiendo otro bloque movido también se realiza simplemente. Solo necesitas agregar nueva caracteristica En este archivo.

En primer lugar, debe configurar las opciones al llamar a una función. Asegúrese de establecer el nombre del controlador. Con él, informamos a JQery, qué controlador se usa cuando presiona el botón del mouse en un área de documentos específica. El nombre del controlador puede ser una clase o un atributo de identificación.

En nuestra primera función hay dos manejadores de eventos. en movimiento. y ondrop.. Ambos llaman nuevas funciones transmitidas al evento actual como variables. Aquí está la manipulación del código HTML en el rectángulo para actualizar con cada movimiento. Este es un efecto maravilloso para demostrar cómo es posible controlar el proceso utilizando eventos de jQuery simples.

En la segunda función, usamos los parámetros Z-index y opacidad. ¿Puedo agregar otras propiedades CSS? Pero esto requerirá un código de reabastecimiento de JavaScript para verificar las instalaciones. Por ejemplo, puede transmitir otro estilo de fuente o significado para la altura y el ancho para un rectángulo en movimiento, ¡será un truco muy interesante!

Conclusión

Como resultado de un pequeño trabajo, recibimos a nuestra disposición una maravillosa interfaz con la función "gotas y lanzamiento". Jquery proporciona grandes beneficios para los desarrolladores que anhelan métodos antiguos para usar métodos antiguos.

Como resultado, recibimos no solo las funciones de los manipuladores de eventos, sino que podemos transmitir nuevas variables a bloques sin arrastre. Esto abre nuevas oportunidades para la creatividad. La demostración a la lección contiene solo el boceto de lo que se puede hacer con la ayuda de dicho código.

Así que aprenda la documentación de jQuery para usar las funciones de la biblioteca.

Donde se implementan los elementos GUI utilizando un pseeudográfico) utilizando el manipulador del mouse o la pantalla táctil.

El método se implementa por "Captura" (presionando el principal ( primero, más a menudo que el botón del ratón izquierdo) que se muestra en la pantalla de la computadora de la computadora, el software disponible para tal operación, y muévalo a otro lugar (para cambiar la ubicación) o "Lanzarlo" a otro elemento (para llamar a los proporcionados correspondientes por el programa, acciones). En relación con las ventanas (también capaces de moverse en este método), este término generalmente no se usa.

Acciones básicas y más. ejemplos simples Las acciones de arrastrar y soltar son: mover un objeto, mueva el objeto desde el panel al panel, aunque en moderno sistemas operativos El arrastre y la caída obtuvieron un uso generalizado y es una de las principales formas de interactuar con la computadora en la interfaz gráfica de usuario.

Los objetos para mover pueden ser los siguientes elementos de la interfaz: iconos de escritorio (iconos), barra de herramientas flotantes, accesos directos de programa en la barra de tareas (comenzando con Win XP), elementos de TreeView, cadena de texto, célula DataGridView., También elementos OLE. Los objetos pueden mover ambos dentro de un área determinada, dentro de una ventana, entre los paneles de una ventana y entre las diferentes ventanas.

El evento de arrastre debe ser iniciado por cualquier acción de usuario. La mayoría de las veces, esta acción es presionar el botón izquierdo del ratón en el elemento (el evento se llama Moudown), que se puede mover en su contenedor. Algunos componentes poseen eventos propios El inicio de la caída de Drag-N, por ejemplo, TreeView tiene un evento ItemDrag.

Fundación Wikimedia. 2010.

Mira lo que es "Drag-and-Drop" en otros diccionarios:

Arrastrar y soltar. - \u003c[DRæG əND DRɔ̣P] N.; ; Unz.; EDV\u003e DAS ANKLICKEN EINES OBJEKTES, DAS AUF DEM ComputerBildschirm (en Eine Andere Datei BZW. Un Eine Andere Stelle) Verschoben U. Dort Wieder LosGelassen Wird [Engl. Arrastre "Ziehen" + y "Und" + Drop "Fallen ... Universal-Lexikon

Forma de realizar cualquier acción en interfaces gráficas Usuario que implica el uso ratón de computadora. Traducido de inglés significa literalmente: girando y lanzando. La acción se realiza operando visible en la pantalla ... ... Términos de negocio Diccionario

arrastrar y soltar. - (Computación) Para mover un icono, archivo, etc. a través de la pantalla con un mouse y sumarlo en un lugar diferente (arrastrar y soltar adjetivo) Entrada principal: Drag ... Diccionario de inglés.

arrastrar y soltar. - Para mover algo de un área de una pantalla de computadora a otra usando el mouse: »El software le permite arrastrar y soltar elementos para el Donde quieras. Entrada principal: Arrastre ... Términos financieros y de negocios

aRRASTRAR Y SOLTAR - Reino Unido nosotros verbo n.; GEN :; Pl.: Unz.; EDV\u003e DAS ANKLICKEN EINES OBJEKTES, DAS AUF DEM ComputerBildschirm (en Eine Andere Datei BZW. Un Eine Andere Stelle) Verschoben U. Dort Wieder LosGelaSsen Wird)