Java - Drag And Drop en JavaFX

¿Cómo realizar un drag and drop en javaFx? 

Acá les mostraremos una forma sencilla de realizar drag and drop de un objeto, utilizando la interfaz de javafx, la cual nos permite la manipulación de interfaz gráfica de nuestro programa. Si habéis llegado acá probablemente lleváis ya rato invertido en intentar realizar un drag and drop en la interfaz, pero no os desesperéis acá os traemos la solución. 

Herramientas Básicas

Para empezar necesitaréis tener instalada la librería JavaFx junto con vuestro JDK (Java Development Kit), a sí mismo como un controlador o un ambiente desarrollo en el cual trabajéis con mayor libertad.

Pasos 

Ya teniendo estas herramientas podemos dar inicio a la creación de nuestro programa con la implementación drag and drop.

Para crear el programa diríjase al apartado File>New>Other, en Other buscareis la opción de JavaFx project y le darán a esa opción, ya con ello ponerle un nombre a vuestro proyecto y clickear el botón de finish. 

Pasos visibles en las siguientes imagenes:

Ignorar código que aparece detrás

Código Disponible al final

Una vez creado el archivo os aparecerá ,dentro de vuestro paquete application, la clase main, abridla y sera muy parecido a lo siguiente:  

Si ejecutáis el código podrán ver que solo es una ventana en blanco:

Ahora procederemos a la creación de una clase drag and drop en donde realizaremos la detección control y ejecución del mismo.

Para ello necesitaremos crear un objeto ya sea una figura, o utilizar una imagen como en el siguiente caso en donde se crea una nueva clase llamada ImageController la cual se encarga de tratar objetos de tipo Image y ImageView:

Esta clase trata los objetos de tipo imagen, objeto el cual vosotros en caso de usar un objeto tipo imagen deberéis incluir en vuestro proyecto y según la ubicación de la misma así cambiara la ruta usada en la linea 7.

Ya con esta clase realizada procedemos a actualizar la clase main, donde utilizaremos los valores de la clase ImageController.

En este código sera necesario la creación de un Pane, donde se realizara la mayoría de las acciones. Un ScrollPane que almacenara los objetos con los cuales trabajaremos y un VBox para ordenar los objetos dentro del ScrollPane en caso de añadir más de uno.

También nos damos la libertad de re acomodar el tamaño de la ventana y colocar en posición nuestro Asimismo se realizo la llamada del método que más adelante veremos, proveniente de la clase DragAndDrop llamado EstablishTarget, asi como el acceso de datos de las imágenes por medio de la clase ImageController, llamada como IC en nuestro main.

En la clase DragAndDrop realizamos los algoritmos más importantes para realizar el drag and drop. El cual funciona de modo que se mantiene estático el objeto al cual queremos mover y se crea una copia del mismo la cual se podrá dropear en el Pane y en coordenadas previamente definidas.

 

Para el funcionamiento correcto del drag and drop, es necesario establecer donde queremos dropear un objeto, en este caso utilizamos el Pane definido en nuestro main y lo enviamos desde alli, para que al llegar al método sea utilizado con el nombre de Target.

A Target le asignamos un setOnDragOver que funciona de manera que hace que nuestro Target detecte cuando una función de drag and drop se esta llevando a cabo. Asimismo un setOnDragDropped para detectar cuando se suelta el objeto y crear así, una copia del mismo en el sitio donde este se dropea.

Y a la vez añadiéndolo a nuestro Target mediante la linea 32.

También es necesario detectar si nuestro objeto esta siendo utilizado en un proceso drag and drop, por lo cual se realiza la detección del mismo en la linea 39, así como el efecto de estar moviendo la imagen en la linea 43 y al mismo tiempo el almacenamiento de su información para poder hacer efectivo su copia en nuestro Target.

En fin eso sería un drag and drop el cual realiza copia de los datos y que se puede realizar de manera continua con un solo objeto. A grandes rasgos esa sería una explicación a nivel general de como realizar un drag and drop siguiendo la estructura anterior. Obteniendo al final el siguiente resultado:

Eso sería todo, espero os allá sido de ayuda.

Código disponible en el siguiente link: https://github.com/OmegaGamingZone/DragAndDrop