Implement drag-and-drop, as in Scene Builder

Question

I am creating an application in JavaFx 2.2 which consists of a divided area with a component panel on the left side and a worksheet on the right side. Basically what I would like to do is a simple wysiwyg editor in which you drag the component from left to right and then arrange them on the right side.

I spent the last couple of days trying to implement the same drag-and-drop function that SceneBuilder has, with no luck.

After the sample in http://docs.oracle.com/javafx/2/drag_drop/HelloDragAndDrop.java.html I managed to get a drag and drop, but I can not find a way to change the default file icon that appears when dragging (and replacing it with a snapshot of the component that I am dragging), and how to display a forbidden icon when you are above something that you cannot refuse.

Any help (could be advice, a piece of code, a sample or other) would be appreciated :)

Thanks!

Answer 1

[UPDATE]

Finally, he managed:

/* The 'sceneRoot' object is the root Node of the scene graph * stage.setScene(new Scene(sceneRoot, 1280, 1024)); */ private ImageView dragImageView = new ImageView(); private Node dragItem; 

_

 rightPane.setOnMouseDragEntered(new EventHandler<MouseDragEvent>() { public void handle(MouseDragEvent e) { rightPane.setStyle("-fx-border-color:red;-fx-border-width:2;-fx-border-style:solid;"); e.consume(); } }); rightPane.setOnMouseDragExited(new EventHandler<MouseDragEvent>() { public void handle(MouseDragEvent e) { rightPane.setStyle("-fx-border-style:none;"); e.consume(); } }); rightPane.setOnMouseDragReleased(new EventHandler<MouseDragEvent>() { public void handle(MouseDragEvent e) { //TODO: add new instance of dragItem to rightPane e.consume(); } }); 

_

 private void addGesture(final Node node) { node.setOnDragDetected(new EventHandler<MouseEvent>() { public void handle(MouseEvent e) { SnapshotParameters snapParams = new SnapshotParameters(); snapParams.setFill(Color.TRANSPARENT); dragImageView.setImage(node.snapshot(snapParams, null)); sceneRoot.getChildren().add(dragImageView); dragImageView.startFullDrag(); e.consume(); } }); node.setOnMouseDragged(new EventHandler<MouseEvent>() { public void handle(MouseEvent e) { Point2D localPoint = sceneRoot.sceneToLocal(new Point2D(e.getSceneX(), e.getSceneY())); dragImageView.relocate( (int)(localPoint.getX() - dragImageView.getBoundsInLocal().getWidth() / 2), (int)(localPoint.getY() - dragImageView.getBoundsInLocal().getHeight() / 2) ); e.consume(); } }); node.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent e) { node.setCursor(Cursor.HAND); } }); node.setOnMousePressed(new EventHandler<MouseEvent>() { public void handle(MouseEvent e) { dragItem = node; dragImageView.setMouseTransparent(true); node.setMouseTransparent(true); node.setCursor(Cursor.CLOSED_HAND); } }); node.setOnMouseReleased(new EventHandler<MouseEvent>() { public void handle(MouseEvent e) { dragItem = null; dragImageView.setMouseTransparent(false); node.setMouseTransparent(false); node.setCursor(Cursor.DEFAULT); sceneRoot.getChildren().remove(dragImageView); } }); } 

Answer 2

Maybe late, but with the setDragView parameter, now it's easier :)

 // Cursor Display for Drag&Drop source.setOnMouseEntered(e -> source.setCursor(Cursor.OPEN_HAND)); source.setOnMousePressed(e -> source.setCursor(Cursor.CLOSED_HAND)); source.setOnMouseReleased(e -> source.setCursor(Cursor.DEFAULT)); // Manage drag source.setOnDragDetected(event -> { /* drag was detected, start a drag-and-drop gesture*/ Dragboard db = source.startDragAndDrop(TransferMode.MOVE); // Visual during drag SnapshotParameters snapshotParameters = new SnapshotParameters(); snapshotParameters.setFill(Color.TRANSPARENT); db.setDragView(source.snapshot(snapshotParameters, null)); /* Put a string on a dragboard */ ClipboardContent content = new ClipboardContent(); content.putString(source.getText()); db.setContent(content); event.consume(); });