Drag and Drop muy fácil con un DataGrid Flex

En el siguiente ejemplo vamos a ver como lograr de manera muy fácil la funcionalidad de pasar datos de un DataGrid hacia otro o viceversa con solo realizar el típico "drag and drop" del ratón (presionando el botón izquierdo del ratón sobre el dato que queremos pasar y arrastrándolo hasta el DataGrid que deseamos que reciba la información). Para empezar la explicación vamos a ver en funcionamiento del ejemplo que vamos a realizar:


Existen varias maneras de realizar esta funcionalidad, algunas de ellas requieren mayor dedicación y programación por parte del desarrollador y otras no, así como también las que requieren mayor programación también permiten un mayor control. En este voy a explicar la mas sencilla y fácil de implementar.

Todos los objetos que heredan de la clase ListBase (El DataGrid tambien, por heredar de esta clase) tienen 5 propiedades muy interesantes que permiten contemplar la funcionalidad Drag and Drop de una manera muy sencilla:

1. dragEnabled: Esta propiedad especifica si el componente ListBase debe permitir que al seleccionar un dato se pueda iniciar el arrastre de la informacion hacia cualquier componente ListBase (incluyendo este mismo componente).
2. dropEnabled: Esta propiedad especifica si el componente ListBase debe permitir que un dato entrante pueda ser soltado sobre este componente.
3. dragMoveEnabled: Esta propiedad dice si cuando un objeto es arrastrado a partir de este componente se debe borrar la copia original que inicio el arraste. Es decir, si esta propiedad es falsa y hacemos un drag and drop de algun item de la lista, se mantendrá una copia del item en el lugar donde si inicio el movimiento.
4. allowMultipleSelection: Con esta propiedad podemos realizar el drag and drop de multiples objetos (items) en un mismo movimiento.
5. allowDragSelection: Esta propiedad nos indica si es posible realizar una seleccion sobre un item para realizar el drag and drop. Si es falsa no podremos seleccionar ningun item para realizar un drag and drop sobr el.

Entonces si en este ejemplo nosotros queremos realizar un drag and drop de el datagrid superior al datagrid inferior entonces debemos colocarle al datagrid superior las siguientes propiedades dragEnabled, allowDragSelection y dragMoveEnables como true. Y en el caso del datagrid inferior debemos colocarle la propiedad dropEnabled como true.

Si nosotros quisieramos podríamos reemplazar uno de los DataGrid utilizados en este ejemplo por cualquier otro componente que herede de la clase ListBase (El List, TitleList, Tree, etc.).

Bueno eso es todo! Como pueden ver es demasiado simple y fácil de realizar. Cualquier pregunta, si es que las tienen, no duden en realizarlas en los comentarios del post que yo siempre estoy pendiente de responderlas! Para descargar el código fuente del ejemplo presiona click aquí.