En este tutorial se explica cómo utilizar los métodos Drag & Drop en Flex. En muchos de los artículos y componentes de flex, estas propiedades ya están ejecutados y su uso es muy sencillo en aquellos componentes con soporte nativo Drag & Drop.
Las cosas pueden llegar un poco más complicado si trabajamos juntos con otros componentes, pero este no será el caso. El tutorial a continuación pasar a explicar cómo realizar un Drag & Drop y componentes entre los que tienen el apoyo nativo de drag & drop, podemos elegir uno de los siguientes:
DataGrid
Lista
HorizontalList
PrintDatagGrid
TileList
Árbol
Vamos a utilizar dos DataGrid, y hacer un ejemplo de un sencillo sistema de carrito de la compra, la creación de un nuevo proyecto y colocar el siguiente código:
<Mx: Aplicación " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " absolute " layout = "absoluta" " 510 " width = "510" " 349 " height = "349" " [1.0, 1.0] " backgroundGradientAlphas = [1,0, 1,0] " " [#FFFFFF, #FFFFFF] " > backgroundGradientColors = [# FFFFFF, # FFFFFF] ">
<Mx: DataGrid " mercado " id = "mercado" " 37 " x = "37" " 86 " y = "86" " 204 " width = "204" " 142 " height = "142" " [#F6F0F0, #FFFFFF] " > alternatingItemColors = [F6F0F0 #, # FFFFFF] ">
<Mx: Columns>
<Mx: DataGridColumn " Objeto " headerText = "Objeto" " objeto " /> de datos = "objeto" />
<Mx: DataGridColumn " Preço " headerText = "Precio" " preco " /> de datos = "precio" />
</ Mx: columnas>
<Mx: DataProvider>
<Mx: Objeto " Livro A " objeto = "El Libro" " 25 € " /> Precio = "25 €" />
<Mx: Objeto " Livro B " objeto = "B" Libro " 30 € " /> Precio = "30 €" />
<Mx: Objeto " Errata LA " objeto = "LA erratas" " 15 € " /> Precio = "15 €" />
</ Mx: dataProvider>
</ Mx: DataGrid>
<Mx: DataGrid " carrinho " id = "carrito" " 276 " x ='276 ' " 86 " > y = "86">
<Mx: Columns>
<Mx: DataGridColumn " Objeto " headerText = "Objeto" " objeto " /> de datos = "objeto" />
<Mx: DataGridColumn " Preço " headerText = "Precio" " preco " /> de datos = "precio" />
</ Mx: columnas>
</ Mx: DataGrid>
<Mx: Etiqueta " 37 " x = "37" " 60 " y = "60" " Mercado " text = "Mercado" " 140 " /> width = "140" />
<Mx: Etiqueta " 276 " x ='276 ' " 60 " y = "60" " Carrinho de compras " text = "carrito de la compra" " 140 " /> width = "140" />
</ Mx: Aplicación>
En que muy posiblemente sea con el diseño gráfico de la imagen:
Parte 1
Nuestro objetivo es pasar DataGrid elementos de "mercado" para datarid "carrito de la compra" para utilizar los métodos que puede arrastrar y soltar desde el mismo nativo del DataGrid, pero para los que tenemos que hacer algunos cambios en el código, lo que indica que prestará apoyo a estas operaciones. Vamos a cambiar el DataGrid la izquierda (de mercado) para este dragEnabled añadiendo el parámetro y establecer como verdad.:
y haciendo lo mismo en DataGrid a la derecha, pero con el parámetro dropEnabled:
y listo, nuestro datagrids están listos para enviar y recibir artículos, y se pueden guardar y ejecutar las aplicaciones que tendrá el drag & drop en los negocios.
El funcionamiento del drag & drop en los componentes que ya cuentan con su apoyo es tan simple como se ha explicado, pero ahora vamos a hacer algo más elaborado, utilizando el mismo código. Vamos a poner una papelera en nuestra disposición por el poder-MOS eliminar elementos de nuestro carrito de la compra. Para hacerlo, después de la última lugar el texto siguiente:
y tenemos algo muy similar al siguiente:
Parte 2
Dado que una imagen no está soportado nativamente tienen el drag & drop, tenemos que encontrar una manera de hacerlo. En primer lugar tenemos que indicar a los DataGrid que también pueden ser objeto de arrastre, y también permitirá seleccionar varias líneas al mismo tiempo, ya que añadirá en el DataGrid "cesta" 3 parámetros tales como dragEnabled = "true", la allowMultipleSelection = "true" y dragMoveEnabled = "true" conseguir nuestro DataGrid como este:
Con estos parámetros indican que estoy DataGrid (además del ya aceptar gota) es también aceptar arrastrar y muiltipla selección de temas y cuando el drag & drop esta DataGrid a otro objetivo, que permitirá su contenido seleccionado no se mueve y copiar como lo era antes ...
Si usted busca en los parámetros de la etiqueta mx: Arrastre la imagen hay algunos elementos que nos puede permitir hacer que el sujeto trata de dargar & drop, y es precisamente una de las propiedades que usamos, la escritura de la etiqueta la imagen de nuestra basura, los siguientes :
DragEnter = "lidaEnter (event)"
obtener la etiqueta mx: imagen como esta:
Estos dos parámetros son DragDrop DragEnter y eventos que se activan cuando el objeto es un objetivo de arrastrar y soltar operaciones, en este caso la función lidaEnter () se llama cuando un objeto blanco para arrastrar pasar en la parte superior de nuestra imagen, aquí tenemos que darle a flex es capaz de arrastrar.
Todo lo que queda es la creación de la función para manejar este caso, específicamente la lidaEnter () para poner el código siguiente después de la 2-línea (después de la etiqueta mx: aplicación):
CDATA [ <! [CDATA [
importación events . DragEvent ; mx. acontecimientos. DragEvent;
importación managers . DragManager ; mx. directivos. DragManager;
privado función event : DragEvent ) : void { lidaEnter (event: DragEvent): void (
var Image = event . currentTarget dropTarget: Imagen = evento. currentTarget el Imagen;
acceptDragDrop ( dropTarget ) ; DragManager. AcceptDragDrop (dropTarget);
showFeedback ( DragManager . MOVE ) ; DragManager. ShowFeedback (DragManager. movimiento ");
)
]]>
mx:Script> </ Mx: Script>
Y listo, tenemos el mercado con nuestro carrito de la compra y la basura descalificado por uno o más artículos de la cesta de la compra.
¿Cómo se puede reparar no tienen dificultad, por lo tanto, yo uso y el abuso!
Final de código:
<Mx: Aplicación " http://www.adobe.com/2006/mxml " xmlns: mx = "http://www.adobe.com/2006/mxml" " absolute " layout = "absoluta" " 510 " width = "510" " 349 " height = "349" " [1.0, 1.0] " backgroundGradientAlphas = [1,0, 1,0] " " [#FFFFFF, #FFFFFF] " > backgroundGradientColors = [# FFFFFF, # FFFFFF] ">
<Mx: Script>
<! [CDATA [
mx.events.DragEvent importación;
mx.managers.DragManager importación;
lidaEnter private function (event: DragEvent): void (
var dropTarget: Imagen = event.currentTarget la imagen;
DragManager.acceptDragDrop (dropTarget);
DragManager.showFeedback (DragManager.MOVE);
)
]]>
</ Mx: Script>
<Mx: DataGrid " mercado " id = "mercado" " 37 " x = "37" " 86 " y = "86" " 204 " width = "204" " 142 " height = "142" " [#F6F0F0, #FFFFFF] " alternatingItemColors = [F6F0F0 #, # FFFFFF] " " true " > dragEnabled = "true">
<Mx: Columns>
<Mx: DataGridColumn " Objeto " headerText = "Objeto" " objeto " /> de datos = "objeto" />
<Mx: DataGridColumn " Preço " headerText = "Precio" " preco " /> de datos = "precio" />
</ Mx: columnas>
<Mx: DataProvider>
<Mx: Objeto " Livro A " objeto = "El Libro" " 25 € " /> Precio = "25 €" />
<Mx: Objeto " Livro B " objeto = "B" Libro " 30 € " /> Precio = "30 €" />
<Mx: Objeto " Errata LA " objeto = "LA erratas" " 15 € " /> Precio = "15 €" />
</ Mx: dataProvider>
</ Mx: DataGrid>
<Mx: DataGrid " carrinho " id = "carrito" " 276 " x ='276 ' " 86 " y = "86" " true " dropEnabled = "true" " true " dragEnabled = "true" " true " allowMultipleSelection = "true" " true " > dragMoveEnabled = "true">
<Mx: Columns>
<Mx: DataGridColumn " Objeto " headerText = "Objeto" " objeto " /> de datos = "objeto" />
<Mx: DataGridColumn " Preço " headerText = "Precio" " preco " /> de datos = "precio" />
</ Mx: columnas>
</ Mx: DataGrid>
<Mx: Etiqueta " 37 " x = "37" " 60 " y = "60" " Mercado " text = "Mercado" " 140 " /> width = "140" />
<Mx: Etiqueta " 276 " x ='276 ' " 60 " y = "60" " Carrinho de compras " text = "carrito de la compra" " 140 " /> width = "140" />
<Mx: Imagen " 219.5 " x = "219,5" " 256 " y = "256" " http://www.msdevstudio.com/mywork/recicle.png " source = "http://www.msdevstudio.com/mywork/recicle.png" " false " maintainAspectRatio = "false" " 76 " width = "76" " 73 " height = "73" " lixeira " id = "basura" " lidaEnter(event) " DragEnter = "lidaEnter (event)" />
</ Mx: Aplicación>
Pueden ver el resultado final en línea con código fuente disponible aquí
Abrazo y espero que sea útil y esclarecedor.
13 Comentarios
Gracias Mario!
Hombre, yo estaba buscando este desde hace mucho tiempo! Y no había encontrado nada agradable.
Felicitaciones por su tutoriales y la iniciativa para ayudar a mantener así!
Oupa George, a pesar de que ayudó a ...
Gracias ..
Abrazar.
Muy bonito, me gustó el artículo, me dio una idea a la pantalla lo que yo estaba haciendo en flex, solo que no pude terminar, si mi problema y que las columnas de otra red (drop) labelfunctin son por necesidad y no de datos en este Si no funciona, usted tiene algunos consejos?
Janderson bueno, pero usar una labelFunction para que? así nunca probado (pero debería funcionar), pero creo que en lugar de la etiqueta función puede utilizar un procesador tema que debería funcionar ... pero explicar mejor cuál es su función de la etiqueta, y si es sólo en DataGrid o también en cada columna ...
Para optimizar el contenido de su grilla (caída) puede utilizar el DragDrop = "función (caso)" para optimizar su contenido ...
véase:
http://blog.flexmonkeypatches.com/2008/03/24/nested-item-renderers-with-scrollbars-and-drag-and-drop-enabled-scroll-dont-drag-please/
y el mejor ejemplo:
http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/
Trate de explicar un poco mejor ...
Abrazar.
Mario, VLW de atención, abrir un foro sobre el tema de la flexbrasil, creo que explica mejor lo que necesito.
http://forum.flexbrasil.com.br/viewtopic.php?f=4&t=532
la pantalla es la siguiente, costes de formación, cuando el hombre arrastrando una tabla de precios para la red es donde el precio del producto, voy a escribir en el banco que la lista de precios de este producto y, a continuación, la lista ya la mesa con el El valor sugerido de venta. más de esto, tengo que comprobar si la mesa ya no estaba registrado, por ejemplo, ¿por qué debe "interceptar" el evento, para hacer algunas comprobaciones y cálculos.
VLW.
ah! VLW y por los enlaces, voy a examinar el tema Reder y analizar cómo funciona, gracias
Gracias por compartir sus conocimientos de forma gratuita, es muy útil.
Sólo tengo una pregunta, ¿hay alguna manera de hacer que funcione en Opera?
Una vez más, gracias.
Hola Brian, no funciona en Opera? esto es muy extraño ... Yo no soy consciente de este problema ... pero es sólo problema en este caso? o han tenido problemas en el flex antes?
Recuerdos.
Hola, Mario. Haciendo que su ejemplo ha problema en Opera, pero en otros navegadores funciona normalmente. Así que refiz (sin copiar el código, pero haciendo la misma cosa) y ha trabajado perfectamente en todos los navegadores, con un pequeño detalle: Si, por ejemplo, copia de la carpeta donde se ha guardado el archivo y pasar a otro equipo, o incluso pegarlo en otro directorio en mi equipo, empezando a ser un problema. El arrastrar y soltar entre la cesta de mercado y obras, pero para tratar de arrastrar el carro de la basura, simplemente no. Esto ocurre en todos los navegadores, Exeter en Internet Explorer.
Otro problema, fuera del contexto, con Opera'm no pueden dejar comentarios aquí.
Gracias por su atención, continuar la gran labor.
Brian Bueno, permítanme abrir boca, nunca había pasado por una cosa así ... pero da un error?
En cuanto a las observaciones, pueden no tener habilitado JavaScript en Opera, debido a la necesidad de dejar comentarios a javascript permitido a correr ...
Abrazar.
No, no hay errores, pero para arrastrar el carro de la basura devuelve el tema a la cesta, como si la basura no se permitirá a recibirla.
Lo comprobé y habilitar JavaScript en Opera, realmente extraño.
Aún así, gracias por tu ayuda.
Abrazar.
Lo hice, con ayuda averiguar lo que estaba sucediendo. Yo había dejado la basura estático, añadió que para incrustar y trabajado. Errores de novato ...
Gracias por su atención.
Hmm ... mi ejemplo se utiliza la papelera sin ser incrustar ... raro, pero que aún funciona bien ..
Abrazar.