# Drag and Drop imageviews



## UchihaSevenfold (17. Jun 2015)

Hey Leute 

ich schreibe im moment ein Programm, mit welchem ich mir Bilder aus flicker laden kann. Für ein besseres verständnis schaut euch mal bitte das Bild im anhang an. 

Ich gebe in das Textfeld die tags ein nach denen ich suche und wenn ich dann auf den button klicke werden mir 20 bilder in dem scrollpane auf der rechten seite angezeigt. Die ganzen Imageviews sind nicht vorgefertigt sondern werden in meinem code in einer for-schleife generiert. Nun seht ihr im oberen Bereich die 5 dunkelgrauen Felder. 

Das sind im moment nur panes. Was ich erreichen möchte ist: Ich möchte aus den 20 Bildern die er mir gibt 5 bilder auswählen können und per drag and drop in die Panes ziehen können. 

Nun bin ich erst einmal bei der logischen vorbereitung aber irgendwie sehe ich den Wald vor lauter Bäumen nicht. könnt ihr mir verraten wie ich das anstellen soll bzw WIE das möglich ist?

kann ich ein Imageview "dragn" und auf ein anderes  droppen ? oder kann ich ein imageview nehmen und auf ein pane droppen? Die Images die in der Imageview angezeigt werden sind ja so zu sagen nur URLS die in dem imageview dargestellt werden. stellt das ein Problem dar ?

vll kann mit irgendwer sagen was wie moeglich ist ? vielen dank im vorraus =)

david


----------



## X5-599 (17. Jun 2015)

Also möglich ist es schon. Aber nicht gerade einfach, wie ich finde. Es geht z.B. mittels DragSource mit DragGestureListener und DropTarget mit DropTargetListener. DragSourceListener kann aus dem DragGestureListener dabei auch hilfreich sein.

Ich hätte da ein Beipiel aus drei Klassen. Ist aber ein Bug drin, den ich mir nicht erklären kann. Taucht auch nur ab und zu mal auf. Manchmal draggt man ein Image auf ein anderes und er droppt es einfach nicht. Es sieht dann so aus als wenn das Programm steht (Drag Icon ändert sich nicht etc). Der Drop läuft erst weiter wenn die Maus einmal aus dem Fenster und dann wieder hinein bewegt wird... Kurios.

Ich stell die Klassen hier mal rein. Vielleicht findet ja jemand heraus woran das liegt.


```
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.GridLayout;
import java.awt.Image;
import java.awt.image.BufferedImage;

import java.util.Arrays;
import java.util.List;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;


public class Demo
{
	private static List<Color> colors = Arrays.asList(new Color[] {
			Color.BLACK, Color.BLUE, Color.CYAN, Color.DARK_GRAY,
			Color.GRAY, Color.GREEN, Color.LIGHT_GRAY, Color.MAGENTA,
			Color.ORANGE, Color.PINK, Color.RED, Color.WHITE, Color.YELLOW
			});
	private static int currentColorIndex = -1;
	
	private static Color nextColor()
	{
		currentColorIndex = ((currentColorIndex +1) < colors.size()) ? currentColorIndex +1 : 0;
		return colors.get(currentColorIndex);
	}
	
	
	public static void main(String[] args)
	{
		SwingUtilities.invokeLater(new Runnable() {
			
			@Override
			public void run()
			{
				JFrame frame = new JFrame("Test Frame");
				frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
				frame.setTitle("Drag 'n Drop Demo");
				
				
				JPanel mainPanel = createMainPanel(4, 4);
				frame.add(mainPanel, BorderLayout.CENTER);
				
				frame.pack();
				frame.setLocationRelativeTo(null);
				frame.setVisible(true);
			}
			
		});
	}
	
	
	private static JPanel createMainPanel(int nImagesX, int nImagesY)
	{
		int hGap = 5;
		int vGap = 5;
		
		JPanel mainPanel = new JPanel(new GridLayout(nImagesY, nImagesX, hGap, vGap));
		
		for(int y = 0; y < nImagesY; y++)
		{
			for(int x = 0; x < nImagesX; x++)
			{
				Image image = createImage(100, 100, nextColor());
				ImagePanel imagePanel;
				if((x == 0) && (y == 0))
					imagePanel = new ImagePanel(image, false); //Beispiel für ein Panel, das keinen Drop erlaubt
				else
					imagePanel = new ImagePanel(image);
				
				Transfer.createDropTargetFor(imagePanel);
				Transfer.createDragSourceFor(imagePanel);
				
				mainPanel.add(imagePanel);
			}
		}
		
		return mainPanel;
	}
	
	private static Image createImage(int width, int height, Color color)
	{
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		
		int rgb = color.getRGB();
		for(int y = 0; y < height; y++)
		{
			for(int x = 0; x < width; x++)
			{
				image.setRGB(x, y, rgb);
			}
		}
		
		return image;
	}
}
```


```
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;

import javax.swing.JPanel;

public class ImagePanel extends JPanel
{
	private static final long serialVersionUID = -8695343940757318689L;
	
	private Image image = null;
	private Dimension preferredSize = null;
	
	private boolean dropAllowed = false;
	private boolean dropOnSelfAllowed = false;
	
	
	public ImagePanel(Image image)
	{
		this(image, true, false);
	}
	
	public ImagePanel(Image image, boolean dropAllowed)
	{
		this(image, dropAllowed, false);
	}
	
	public ImagePanel(Image image, boolean dropAllowed, boolean dropOnSelfAllowed)
	{
		this.image = image;
		this.dropAllowed = dropAllowed;
		this.dropOnSelfAllowed = dropOnSelfAllowed;
	}
	
	public void setImage(Image image)
	{
		this.image = image;
	}
	
	public Image getImage()
	{
		return image;
	}
	
	public boolean isDropAllowed()
	{
		return dropAllowed;
	}
	
	public boolean isDropOnSelfAllowed()
	{
		return dropOnSelfAllowed;
	}
	
	@Override
	protected void paintComponent(Graphics g)
	{
		super.paintComponent(g);
		g.drawImage(image, 0, 0, null);
	}
	
	@Override
	public Dimension getPreferredSize()
	{
		if(preferredSize == null)
		{
			if(image != null)
			{
				preferredSize = new Dimension(image.getWidth(null), image.getHeight(null));
			}
			else
			{
				return super.getPreferredSize();
			}
		}
		
		return preferredSize;
	}
}
```


```
import java.awt.Component;
import java.awt.Image;
import java.awt.datatransfer.DataFlavor;
import java.awt.datatransfer.Transferable;
import java.awt.datatransfer.UnsupportedFlavorException;
import java.awt.dnd.DnDConstants;
import java.awt.dnd.DragGestureEvent;
import java.awt.dnd.DragGestureListener;
import java.awt.dnd.DragSource;
import java.awt.dnd.DragSourceAdapter;
import java.awt.dnd.DragSourceContext;
import java.awt.dnd.DragSourceDropEvent;
import java.awt.dnd.DragSourceListener;
import java.awt.dnd.DropTarget;
import java.awt.dnd.DropTargetAdapter;
import java.awt.dnd.DropTargetDragEvent;
import java.awt.dnd.DropTargetDropEvent;
import java.awt.dnd.DropTargetEvent;
import java.awt.dnd.DropTargetListener;
import java.awt.event.InputEvent;
import java.awt.event.MouseEvent;
import java.io.IOException;


public class Transfer implements Transferable
{
	private Object data = null;
	
	private static final DataFlavor OBJECT_FLAVOR = new DataFlavor(DataFlavor.javaJVMLocalObjectMimeType, "Local object");
	private static DropTargetListener dropTargetListener = null;
	private static DragGestureListener dragGestureListener = null;
	private static DragSourceListener dragSourceListener = null;
	
	public Transfer(Object data)
	{
		this.data = data;
	}
	
	@Override
	public DataFlavor[] getTransferDataFlavors()
	{
		return new DataFlavor[]{OBJECT_FLAVOR};
	}
	
	@Override
	public boolean isDataFlavorSupported(DataFlavor flavor)
	{
		return flavor.equals(OBJECT_FLAVOR);
	}
	
	@Override
	public Object getTransferData(DataFlavor flavor)
	{
		return flavor.equals(OBJECT_FLAVOR) ? data : null;
	}
	
	
	
	
	public static void createDragSourceFor(ImagePanel panel)
	{
		new DragSource().createDefaultDragGestureRecognizer(panel, DnDConstants.ACTION_REFERENCE, getDragGestureListener());
	}
	
	public static void createDropTargetFor(ImagePanel panel)
	{
		panel.setDropTarget(new DropTarget(panel, getDropTargetListener()));
	}
	
	
	private static DragSourceListener getDragSourceListener()
	{
		if(dragSourceListener == null)
		{
			dragSourceListener = new DragSourceAdapter() {
				
				@Override
				public void dragDropEnd(DragSourceDropEvent dsde)
				{
					System.out.println("dropEnded");
					
					DragSourceContext dragSourceContext = dsde.getDragSourceContext();
					if(dragSourceContext == null)
					{
						return;
					}
					
					Component component = dragSourceContext.getComponent();
					if(!(component instanceof ImagePanel))
					{
						return;
					}
					
					ImagePanel panel = (ImagePanel)component;
					if(!panel.isDropOnSelfAllowed())
					{
						createDropTargetFor(panel);
					}
				}
			};
		}
		
		return dragSourceListener;
	}
	
	private static DragGestureListener getDragGestureListener()
	{
		if(dragGestureListener == null)
		{
			dragGestureListener = new DragGestureListener() {
				
				@Override
				public void dragGestureRecognized(DragGestureEvent dge)
				{
					System.out.println("dragGestureRecognized");
					
					InputEvent inputEvent = dge.getTriggerEvent();
					if(!(inputEvent instanceof MouseEvent))
					{
						return;
					}
					
					MouseEvent mouseEvent = (MouseEvent)inputEvent;
					if(mouseEvent.getButton() != MouseEvent.BUTTON1)
					{
						return;
					}
					
					Component source = dge.getComponent();
					if(!(source instanceof ImagePanel))
					{
						return;
					}
					
					ImagePanel panel = (ImagePanel)source;
					if(!panel.isDropOnSelfAllowed())
					{
						panel.setDropTarget(null);
					}
					
					dge.startDrag(null, new Transfer(panel.getImage()), getDragSourceListener());
				}
			};
		}
		
		return dragGestureListener;
	}
	
	private static DropTargetListener getDropTargetListener()
	{
		if(dropTargetListener == null)
		{
			dropTargetListener = new DropTargetAdapter() {
				
				@Override
				public void drop(DropTargetDropEvent dtde)
				{
					System.out.println("drop");
					
					try
					{
						Object data = dtde.getTransferable().getTransferData(OBJECT_FLAVOR);
						if(!(data instanceof Image))
						{
							System.out.println("drop rejected");
							dtde.rejectDrop();
							dtde.dropComplete(false);
							
							return;
						}
						
						Object target = dtde.getSource();
						if(!(target instanceof DropTarget))
						{
							System.out.println("target is not a drop target");
							dtde.rejectDrop();
							dtde.dropComplete(false);
							
							return;
						}
						
						DropTarget dropTarget = (DropTarget)target;
						Component component = dropTarget.getComponent();
						if(!(component instanceof ImagePanel))
						{
							System.out.println("component is not an image panel");
							dtde.rejectDrop();
							dtde.dropComplete(false);
							
							return;
						}
						
						ImagePanel targetPanel = (ImagePanel)component;
						Image image = (Image)data;
						targetPanel.setImage(image);
						targetPanel.revalidate();
						targetPanel.repaint();
						
						
						System.out.println("drop complete");
						dtde.acceptDrop(DnDConstants.ACTION_REFERENCE);
						dtde.dropComplete(true);
					}
					catch(UnsupportedFlavorException e)
					{
						e.printStackTrace();
					}
					catch(IOException e)
					{
						e.printStackTrace();
					}
				}
				
				@Override
				public void dragEnter(DropTargetDragEvent dtde)
				{
					System.out.println("dragEnter");
					
					try
					{
						Object target = dtde.getSource();
						if(!(target instanceof DropTarget))
						{
							System.out.println("target is not a drop target");
							dtde.rejectDrag();
							
							return;
						}
						
						DropTarget dropTarget = (DropTarget)target;
						Component component = dropTarget.getComponent();
						if(!(component instanceof ImagePanel))
						{
							System.out.println("component is not an image panel");
							dtde.rejectDrag();
							
							return;
						}
						
						ImagePanel targetPanel = (ImagePanel)component;
						if(!targetPanel.isDropAllowed())
						{
							System.out.println("target panel explicitly denies drops");
							dtde.rejectDrag();
							
							return;
						}
						
						Object data = dtde.getTransferable().getTransferData(OBJECT_FLAVOR);
						if(!(data instanceof Image))
						{
							System.out.println("can't drop here; not an image or null");
							dtde.rejectDrag();
							
							return;
						}
					}
					catch(UnsupportedFlavorException e)
					{
						e.printStackTrace();
					}
					catch(IOException e)
					{
						e.printStackTrace();
					}
					
					System.out.println("drag enter done");
				}
				
				@Override
				public void dragExit(DropTargetEvent dte)
				{
					System.out.println("dragExit");
				}
			};
		}
		
		return dropTargetListener;
	}
}
```

EDIT: Rechtschreibung


----------



## UchihaSevenfold (17. Jun 2015)

Hey danke erstmal fuer diese ausfürhliche antwort ! ich glaub ich hatte vergessen zu sagen das ich mit javafx arbeite :-/ ich hab heut nacht aber schonmal direkt los gelegt und anhand eines beispiels wo es darum ging text nodes zu verschieben perdrag and drop angefangen zu coden. ich habe nun eine drag anddrop methode aber weiß nicht wie ich sie richtig initialisieren kann. 

in dem Beispiel wurde der code einfach in die "main" methode geschrieben. ich habe nun aber in der CONTROLLER klasse  eine methode namens drag(); gemacht. fand ich einfacher weil ich den controller ja brauche da meine elemente im scenebuilder gebaut wurden. 

Wenn ich einfach im Controller in die vorgefertigte initialize Methode  drag(); rein schreibe bekomme ich folgenden fehler


```
Exception in Application start method
java.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:497)
	at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
	at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:497)
	at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
Caused by: java.lang.RuntimeException: Exception in Application start method
	at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
	at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$152(LauncherImpl.java:182)
	at com.sun.javafx.application.LauncherImpl$$Lambda$50/1343441044.run(Unknown Source)
	at java.lang.Thread.run(Thread.java:745)
Caused by: javafx.fxml.LoadException: 
file:/C:/Users/Jens/Documents/NetBeansProjects/Photoview/dist/run461681710/Photoview.jar!/photoview/FXMLDocument.fxml

	at javafx.fxml.FXMLLoader.constructLoadException(FXMLLoader.java:2605)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2583)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2445)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3218)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3179)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3152)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3128)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3108)
	at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3101)
	at photoview.Photoview.start(Photoview.java:40)
	at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$159(LauncherImpl.java:863)
	at com.sun.javafx.application.LauncherImpl$$Lambda$53/681110827.run(Unknown Source)
	at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$172(PlatformImpl.java:326)
	at com.sun.javafx.application.PlatformImpl$$Lambda$45/355629945.run(Unknown Source)
	at com.sun.javafx.application.PlatformImpl.lambda$null$170(PlatformImpl.java:295)
	at com.sun.javafx.application.PlatformImpl$$Lambda$48/1823905343.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at com.sun.javafx.application.PlatformImpl.lambda$runLater$171(PlatformImpl.java:294)
	at com.sun.javafx.application.PlatformImpl$$Lambda$46/1915503092.run(Unknown Source)
	at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
	at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
	at com.sun.glass.ui.win.WinApplication.lambda$null$145(WinApplication.java:101)
	at com.sun.glass.ui.win.WinApplication$$Lambda$36/1963387170.run(Unknown Source)
	... 1 more
Caused by: java.lang.NullPointerException
	at photoview.FXMLDocumentController.drag(FXMLDocumentController.java:139)
	at photoview.FXMLDocumentController.initialize(FXMLDocumentController.java:214)
	at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2552)
	... 22 more
Exception running application photoview.Photoview
Java Result: 1
```


und hier ist meine klasse


```
ArrayList<String> Server = new ArrayList<>();
  String eingabe;
  PhotoList photoList;
  int i = 0;
   ImageView [] imageview;
  Image[] image;
  
  @FXML
  Pane pane1,pane2,pane3,pane4,pane5;
    
   Pane collage2[]={pane1,pane2,pane3,pane4,pane5};
  
    @FXML
    Button ho;
      
    @FXML
    ImageView view;
    
    @FXML
    ScrollPane scroll;
    
    @FXML
    TilePane tile;
    
    @FXML
    TextField text;
    
    

    public FXMLDocumentController() {
     
    }
    
    
  
    
    @FXML
    private void handleButtonAction(ActionEvent event) throws FlickrException {
         
        Flickr flickr = new Flickr (apiKey, secret , new REST());
        eingabe = text.getText();
        SearchParameters searchParams = new SearchParameters();
        String[] tags = new String[]{eingabe};
        String  id = new String ();
        System.out.println(eingabe);
        
        searchParams.setSort(SearchParameters.INTERESTINGNESS_DESC);
        searchParams.setTags(tags);
        searchParams.setUserId(id);
      
        PhotosInterface photoInt = flickr.getPhotosInterface();      
        photoList = photoInt.search(searchParams,20,1);
        
        if(photoList!=null){
                //Get search result and check the size of photo result
                for( i=0;i<photoList.size();i++){
                   
                    //get photo object
                    Photo ph =(Photo) photoList.get(i);
                   
                   
                   Server.add(ph.getLargeUrl());
                    image = new Image [Server.size()];
                  
                   imageview = new ImageView [Server.size()];
                   image [i] = new Image(Server.get(i),true);
                   imageview[i]= new ImageView(image[i]);
                   imageview[i].setFitHeight(200);
                   imageview[i].setPreserveRatio(true);
                   imageview[i].setFitWidth(200);
                   
                   
                   tile.setPadding(new Insets(15, 15, 15, 100));
                   tile.setHgap(20);
                   tile.setVgap(17);
                   tile.getChildren().add(imageview[i]);
                   System.out.println(Server.get(i));
                   
          }
        }
    }
    
    
   public void drag(){
   
    imageview[i].setOnDragOver(event -> {
            Dragboard db = event.getDragboard();
            if (db.hasImage() || db.hasFiles()) {
                event.acceptTransferModes(TransferMode.COPY);
            }
        });
         
         imageview[i].setOnDragDetected((MouseEvent event) -> {
              /* drag was detected, start drag-and-drop gesture*/
              System.out.println("onDragDetected");
              
              /* allow any transfer mode */
              Dragboard db = imageview[i].startDragAndDrop(TransferMode.ANY);
              
              /* put a string on dragboard */
              ClipboardContent content = new ClipboardContent();
              content.getFiles();
              db.setContent(content);
              
              event.consume();
    });
          
          collage2[i].setOnDragOver((DragEvent event) -> {
              /* data is dragged over the target */
              System.out.println("onDragOver");
              
              /* accept it only if it is  not dragged from the same node
              * and if it has a string data */
              if (event.getGestureSource() != collage2[i] &&
                      event.getDragboard().hasFiles()) {
                  /* allow for both copying and moving, whatever user chooses */
                  event.acceptTransferModes(TransferMode.COPY_OR_MOVE);
              }
              
              event.consume();
    });

        collage2[i].setOnDragEntered((DragEvent event) -> {
            /* the drag-and-drop gesture entered the target */
            System.out.println("onDragEntered");
            /* show to the user that it is an actual gesture target */
            
            
            event.consume();
    });

        collage2[i].setOnDragExited((DragEvent event) -> {
            /* mouse moved away, remove the graphical cues */
            
            
            event.consume();
    });
        
        collage2[i].setOnDragDropped((DragEvent event) -> {
            /* data dropped */
            System.out.println("onDragDropped");
            boolean success = true;
            /* if there is a string data on dragboard, read it and use it */
             /* Dragboard db = event.getDragboard();
            
            if (db.hasImage()) {
            collage2[i].set(db.getImage());
            success = true;
            }*/
            /* let the source know whether the string was successfully
            * transferred and used */
            event.setDropCompleted(success);
            
            event.consume();
    });

    }
   
   @Override
    public void initialize(URL url, ResourceBundle rb) {
        drag();
    }    
    
}
```

hier noch die main klasse 



```
public class Photoview extends Application {
 
    
   
 
   
    
    
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
       
      
        
        
   
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    
    
}
}
```

So nun die frage. ist es ueberhaupt möglich eine ImageViewArray mit den methoden wie setOnDragOver zu verknüpfen ? eigentlich muesste es das sonst würde er mir das in netbeans ja gar nicht vorschlagen. aber auf die erste zeile code in der drag methode verweisst der halt in der fehlermeldung. vll initialisiere ich die methode drag auch falsch ?  oder  vll muss der code doch in die mainmethode? aber da weiss ich nichtwie ich die ganzen elemente aus dem scenebuilder , also das TilePane und das PaneArray da rein bekomme weil die ja auch spezielle verweise brauchen aber das geht glaub ich nur im  controller und hoa ich bin verwirrt =(

ich hatte es alles auch schon in der mainklasse aber ohne fehler ging da nichtsich wusste auch nicht wie ich die Arrays derklasse uebergeben kann . 

ich weiss das war jetzt viel input aber vll weisst du da ja weiter. ich bin halt seeehr neu n javafx :-/


----------



## dzim (18. Jun 2015)

tl;dr

Im StackTrace steht


> Caused by: java.lang.NullPointerException
> at photoview.FXMLDocumentController.drag(FXMLDocumentController.java:139)


Ich vermute die Zeile 

```
content.getFiles();
```
Ist der Grund. Warum? Du legst ein neues Clipboard-Objekt an und willst direkt "Files" auslesen?
Wie auch immer: Schau dir mal die Zeile 139 von deinem Code an!

#Edit: wenn der Fehler behoben ist, können wir weiter "experiemtieren"

#Edit2: Warum poppen eigentlich hier gerade so viele Flicker-Fragen auf? Alle aus dem selben Kurs, oder was? Könnt ihr dir Fragen nicht bündeln? ;-)


----------



## VfL_Freak (18. Jun 2015)

Moin,

sicher, dass der Pfad stimmt??
file:/C:/Users/Jens/Documents/NetBeansProjects/Photoview/dist/run461681710/Photoview.jar!/photoview/FXMLDocument.fxml

Gruß Klaus


----------



## UchihaSevenfold (18. Jun 2015)

ja wir muessen halt eas mit flickr , tumblr oderinstagram machen. leider benutzt keiner der anderen drag and drop das hab ich mir als einziger aufgehalst  

@ klaus ja der pfad muesste richtig sein

also..ich habe jetzt die ganze nacht rum probiert und die fehler sind soweit verschwunden . Die OnDragDetected Methode funktioniert auch also wenn ich auf eins der Fotos klicke und ziehe gibt er in der Konsole aus 

OnDragDetected

dann gibts aber probleme mit dem OndragOver..also was heisst probleme. es  funktioniert einfach nicht ;(.

Ich habe ja das ImageviewArray was gefüllt wird mit den fotos von flickr. das heisst da sind immer 20 elemente drin. Nun habe ich im oberen bereich ein tilepane und da moechte ich meine imageviews dann rein droppen. Ich weiß zwar nich ob das möglich ist aber eigentich doch schon. ich hab auch druber nach gedacht in dieses Tilepane schonmal 5 Imageviews vorzufertigen aber das gab fehler. Ich denke ich muss einfach wissen WAS nun das richtige TARGET waere und wie ich das dann in der on drag methode verbinde.

Ich versuche das uebrigens nach diesem tutorial nach zu bauen 

https://docs.oracle.com/javafx/2/drag_drop/jfxpub-drag_drop.htm

Die unterschiede sind: ES wird ein TEXT Node auf ein anderes gedropped.
                               Es sind keine Arrays vorhanden


da brauch ich dann evtl hilfe vll ist was mit den indizes falsch oder ach ich weiß nich =( hier ist mein Code bisher




```
public class FXMLDocumentController implements Initializable {
 

 String apiKey ="7a794d8692936b4b6371ad1750a617d2";
 String secret= "601e153ed7618eb4";
int i = 0;
  ArrayList<String> Server = new ArrayList<>();
  String eingabe;
  PhotoList photoList;
 
   ImageView [] imageview;
   Image[] image;
  
  @FXML
  Pane pane1,pane2,pane3,pane4,pane5;
    
   Pane collage2[]={pane1,pane2,pane3,pane4,pane5};
   
   @FXML
   TilePane tile2;
  
    @FXML
    Button ho;
      
    @FXML
    ImageView view;
    
    @FXML
    ScrollPane scroll;
    
    @FXML
    TilePane tile;
    
    @FXML
    TextField text;
    
    @FXML
    HBox hobox;
    
    

    public FXMLDocumentController() {
     
    }
    
    
  
    
    @FXML
    private void handleButtonAction(ActionEvent event) throws FlickrException {
       
      tile2 = new TilePane();
        Flickr flickr = new Flickr (apiKey, secret , new REST());
        eingabe = text.getText();
        SearchParameters searchParams = new SearchParameters();
        String[] tags = new String[]{eingabe};
        String  id = new String ();
        System.out.println(eingabe);
        
        searchParams.setSort(SearchParameters.INTERESTINGNESS_DESC);
        searchParams.setTags(tags);
        searchParams.setUserId(id);
      
        PhotosInterface photoInt = flickr.getPhotosInterface();      
        photoList = photoInt.search(searchParams,20,1);
        
        if(photoList!=null){
                //Get search result and check the size of photo result
                for(  i=0;i<photoList.size();i++){
                   
                    //get photo object
                    Photo ph =(Photo) photoList.get(i);
                   
                   
                   Server.add(ph.getLargeUrl());
                    image = new Image [Server.size()];
                  
                   imageview = new ImageView [Server.size()];
                   image [i] = new Image(Server.get(i),true);
                   imageview[i]= new ImageView(image[i]);
                   imageview[i].setFitHeight(200);
                   imageview[i].setPreserveRatio(true);
                   imageview[i].setFitWidth(200);
                   
                   
                   tile.setPadding(new Insets(15, 15, 15, 100));
                   tile.setHgap(20);
                   tile.setVgap(17);
                   tile.getChildren().add(imageview[i]);
                   System.out.println(Server.get(i));
                   
                   imageview[i].setOnDragOver(event2 -> {
            Dragboard db = event2.getDragboard();
            if (db.hasImage()|| db.hasFiles()) {
                event2.acceptTransferModes(TransferMode.COPY);
            }
        });
         
          imageview[i].setOnDragDetected((MouseEvent event3) -> {
              /* drag was detected, start drag-and-drop gesture*/
              System.out.println("onDragDetected");
              
              /* allow any transfer mode */
              Dragboard db = imageview[19].startDragAndDrop(TransferMode.ANY);
              
              /* put a string on dragboard */
              ClipboardContent content = new ClipboardContent();
              content.putImage(imageview[19].getImage());
              db.setContent(content);
              
              event3.consume();
    });
          
          tile2.setOnDragOver((DragEvent event4) -> {
              /* data is dragged over the target */
              //System.out.println("onDragOver");
              
              /* accept it only if it is  not dragged from the same node
              * and if it has a string data */
           
            Dragboard db = event4.getDragboard();
            if (db.hasImage() || db.hasFiles()) {
                event4.acceptTransferModes(TransferMode.MOVE);
            }
        });
    

        tile2.setOnDragEntered((DragEvent event4) -> {
            /* the drag-and-drop gesture entered the target */
            System.out.println("onDragEntered");
            /* show to the user that it is an actual gesture target */
            
            
            event4.consume();
    });

       tile2.setOnDragExited((DragEvent event4) -> {
            /* mouse moved away, remove the graphical cues */
            
            
            event4.consume();
    });
        
        tile2.setOnDragDropped((DragEvent event4) -> {
            /* data dropped */
            System.out.println("onDragDropped");
            boolean success = true;
            /* if there is a string data on dragboard, read it and use it */
              Dragboard db = event4.getDragboard();
            
            if (db.hasImage()) {
          db.getFiles().forEach(file -> {
                    try {
                        Image image4 = new Image(Server.get(i),true);
                        ImageView imageView2 = new ImageView(image4);
                        tile2.getChildren().add(imageView2);
                    } catch (Exception exc) {
                        System.out.println("Could not load image "+file);
                    }
                });
                event4.setDropCompleted(true);
            }
            /* let the source know whether the string was successfully
            * transferred and used */
            event4.setDropCompleted(success);
            
            event4.consume();
    });

    }
    
                   
          }
        }
   
    
    
    
    
    
    
    
  
   
    
   
   @Override
    public void initialize(URL url, ResourceBundle rb) {

      
       
    
}

}
```

ich hoffe einer weiß rat =(


edit: hehehehe ich weiss nicht was ich anders gemacht habe eigentlich habe ich nur 3000 mal strg+z gedrueckt aber wenn ich nun ein bild DRAGGE dann gibt er mirauch schon eine vorschaudas Bildes. Siehe anhang hab da nen screenie. er nimmt aber IMMER nur das letzte bild egalauf welches bild ich klicke er nimmt nur das letzte. Sowas in der art habe ich auch befürchtet da ich den ganzen drag and drop kram ja auch in der for-schleife baue die eig nur zum herunterladen des flickr krams gedacht war. aber ich hatte meine gruende dafuer irgendwas hatte sonst immer nicht geklappt. :-/ 

in der onDragDtected Methode gebe ich ja als SOURCE imageview_ an. und da das in der forschleife passiert ist i natuerlich am ende 19 und er nimmt nur das letzte bild. kann ich da nicht irgendwie sagen das es für ALLEbilder aus dem array gelten soll ? Liebe Grüße

danke im vorraus
david_


----------



## dzim (18. Jun 2015)

Da ich selbst noch nicht gemacht habe, würde ich mir mal die offiziellen Tutorials anschauen

https://docs.oracle.com/javase/8/javafx/events-tutorial/drag-drop.htm

Generell aber sind die Tutorials von Oracle in dem Fall wenigstens Wert, mal angeschaut zu haben:
https://docs.oracle.com/javase/8/javase-clienttechnologies.htm

Wenn man generell nach "javafx drag and drop" sucht, könnte man vielleicht noch weiter fündig werden. Ansonsten müsste ich erst mal einen eigenen Test implementieren, was ich im Moment leider nicht kann... Vielleicht schau ich morgen noch mal rein...


----------



## UchihaSevenfold (18. Jun 2015)

Ich suche seit 4 tagen tag und nacht nach tutorials;rtfm::rtfm::rtfm:

und das zweite tutorial was du grad geschickt hast hab ich in meinem oberen post auch erwaehnt =) darauf baut meins ja auf wie ich grad geschrieben habe =)

morgen hab ich die abgabe leider schon da bin ich wohl auf mich allein gestellt !! nur das was mir fehlt hat ja glaub ich auch erstmal nichts mehr mit drag and drop zu tun =)



> in der onDragDtected Methode gebe ich ja als SOURCE imageview_ an. und da das in der for-schleife passiert ist der Index i natuerlich am ende  bei 19 da ich mir 20 Bilder lade und deshalb er nimmt nur das letzte bild (siehe screenshot das is das letzte bild was er mir läd).
> _


_



		Java:In die Zwischenablage kopieren


imageview[i].setOnDragDetected((MouseEvent event3) -> {
              /* drag was detected, start drag-and-drop gesture*/
              System.out.println("onDragDetected");
 
              /* allow any transfer mode */
              Dragboard db = imageview[19].startDragAndDrop(TransferMode.ANY);
 
              /* put a string on dragboard */
              ClipboardContent content = new ClipboardContent();
              content.putImage(imageview[19].getImage());
              db.setContent(content);
 
              event3.consume();
    });


in diesen zeilen meine ich !  bei imageview[i ] ist der wert dann ja bei19 weil das alles in der forschleife steht
natuerlich soll er nicht nur das letzte Bild nehmen sondern es soll mit allen bildern  funktionieren und deshalb die frage: 

Kann ich was anderes sagen außer Imageview? irgendwas von wegen alle bilder aus dem array Imageview ?_


----------



## dzim (19. Jun 2015)

Also auch wenn es dir jetzt nichts mehr bringt, habe ich ein kleines verbuggtes Beispiel gebaut. Verbuggt, weil die Index-Berechnung noch etwas shady ist. Hab aber auch nur etwa 30min reingesteckt und will jetzt heim ;-)

FXML:

```
<?xml version="1.0" encoding="UTF-8"?>
<!-- 
	Do not edit this file it is generated by e(fx)clipse from ../src/application/DnDTest.fxgraph
-->

<?import java.lang.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="application.DnDController" minWidth="640" minHeight="480">

	<top>
		<HBox fx:id="top" style="-fx-background-color: grey;"> 
			<Region fx:id="r1" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets right="5"/> 
				</HBox.margin>
			</Region>
			<BorderPane fx:id="c1" style="-fx-background-color: blue;" minHeight="50" minWidth="50"> 
				<center>
					<Label style="-fx-text-fill: white;" text="1"/> 
				</center>
			</BorderPane>
			<Region fx:id="r2" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets left="5" right="5"/> 
				</HBox.margin>
			</Region>
			<BorderPane fx:id="c2" style="-fx-background-color: blue;" minHeight="50" minWidth="50"> 
				<center>
					<Label style="-fx-text-fill: white;" text="2"/> 
				</center>
			</BorderPane>
			<Region fx:id="r3" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets left="5" right="5"/> 
				</HBox.margin>
			</Region>
			<BorderPane fx:id="c3" style="-fx-background-color: blue;" minHeight="50" minWidth="50"> 
				<center>
					<Label style="-fx-text-fill: white;" text="3"/> 
				</center>
			</BorderPane>
			<Region fx:id="r4" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets left="5" right="5"/> 
				</HBox.margin>
			</Region>
			<BorderPane fx:id="c4" style="-fx-background-color: blue;" minHeight="50" minWidth="50"> 
				<center>
					<Label style="-fx-text-fill: white;" text="4"/> 
				</center>
			</BorderPane>
			<Region fx:id="r5" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets left="5" right="5"/> 
				</HBox.margin>
			</Region>
			<BorderPane fx:id="c5" style="-fx-background-color: blue;" minHeight="50" minWidth="50"> 
				<center>
					<Label style="-fx-text-fill: white;" text="5"/> 
				</center>
			</BorderPane>
			<Region fx:id="r6" style="-fx-background-color: red;" minHeight="50" minWidth="5"> 
				<HBox.margin>
					<Insets left="5" right="5"/> 
				</HBox.margin>
			</Region>
			<padding>
				<Insets left="10" top="10" right="10" bottom="10"/> 
			</padding>
		</HBox>
	</top>
	<center>
		<VBox alignment="CENTER"> 
			<Label text="Bla bla some text"/> 
		</VBox>
	</center>
</BorderPane>
```

Controller:

```
package application;

import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.Node;
import javafx.scene.SnapshotParameters;
import javafx.scene.control.Label;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;

public class DnDController {
	
	@FXML
	private HBox top;
	@FXML
	private BorderPane c1;
	@FXML
	private BorderPane c2;
	@FXML
	private BorderPane c3;
	@FXML
	private BorderPane c4;
	@FXML
	private BorderPane c5;
	
	@FXML
	private Region r1;
	@FXML
	private Region r2;
	@FXML
	private Region r3;
	@FXML
	private Region r4;
	@FXML
	private Region r5;
	@FXML
	private Region r6;
	
	@FXML
	private void initialize() {
		
		prepareDnDSources(c1, c2, c3, c4, c5);
		
		prepareDnDTargets(r1, r2, r3, r4, r5, r6);
	}
	
	private void prepareDnDSources(Node... nodes) {
		if (nodes == null) {
			return;
		}
		for (Node n : nodes) {
			n.setOnDragDetected(new EventHandler<MouseEvent>() {
				public void handle(MouseEvent event) {
					/* drag was detected, start drag-and-drop gesture */
					System.out.println("onDragDetected: " + ((Label) ((BorderPane) n).getChildren().get(0)).getText());
					
					/* allow any transfer mode */
					Dragboard db = n.startDragAndDrop(TransferMode.ANY);
					
					/* put a string on dragboard */
					ClipboardContent content = new ClipboardContent();
					content.putString("" + top.getChildren().indexOf(n));
					db.setContent(content);
					SnapshotParameters params = new SnapshotParameters();
					db.setDragView(n.snapshot(params, null));
					
					event.consume();
				}
			});
			
			n.setOnDragDone(new EventHandler<DragEvent>() {
				public void handle(DragEvent event) {
					/* the drag-and-drop gesture ended */
					System.out.println("onDragDone");
					/* if the data was successfully moved, clear it */
					if (event.getTransferMode() == TransferMode.MOVE) {
						// better to move the node here ???
					}
					
					event.consume();
				}
			});
		}
	}
	
	private void prepareDnDTargets(Node... nodes) {
		if (nodes == null) {
			return;
		}
		for (Node n : nodes) {
			n.setOnDragOver(new EventHandler<DragEvent>() {
				public void handle(DragEvent event) {
					/* data is dragged over the n */
					System.out.println("onDragOver");
					
					/*
					 * accept it only if it is not dragged from the same node and if it has a string data
					 */
					if (event.getGestureSource() != n && event.getDragboard().hasString()) {
						/* allow for both copying and moving, whatever user chooses */
						event.acceptTransferModes(TransferMode.COPY_OR_MOVE);
					}
					
					event.consume();
				}
			});
			
			n.setOnDragEntered(new EventHandler<DragEvent>() {
				public void handle(DragEvent event) {
					/* the drag-and-drop gesture entered the n */
					System.out.println("onDragEntered");
					/* show to the user that it is an actual gesture n */
					if (event.getGestureSource() != n && event.getDragboard().hasString()) {
						// do something to indicate, that we entered a draggable area
						n.setStyle("-fx-background-color: green;");
					}
					
					event.consume();
				}
			});
			
			n.setOnDragExited(new EventHandler<DragEvent>() {
				public void handle(DragEvent event) {
					// do something to indicate, that we left a draggable area
					n.setStyle("-fx-background-color: red;");
					event.consume();
				}
			});
			
			n.setOnDragDropped(new EventHandler<DragEvent>() {
				public void handle(DragEvent event) {
					/* data dropped */
					System.out.println("onDragDropped");
					/* if there is a string data on dragboard, read it and use it */
					boolean success = false;
					Dragboard db = event.getDragboard();
					if (db.hasString()) {
						// n.setText(db.getString());
						int nIndex = top.getChildren().indexOf(n);
						int index = Integer.parseInt(db.getString());
						if (index == nIndex + 1 || index == nIndex - 1) {
							// do nothing
						} else {
							Node spacerToMove = top.getChildren().get(index - 1);
							Node paneToMove = top.getChildren().get(index);
							top.getChildren().remove(spacerToMove);
							top.getChildren().remove(paneToMove);
							top.getChildren().add(nIndex + 1, spacerToMove);
							top.getChildren().add(nIndex + 1, paneToMove);
							success = true;
						}
					}
					
					/*
					 * let the source know whether the string was successfully transferred and used
					 */
					event.setDropCompleted(success);
					
					event.consume();
				}
			});
		}
	}
}
```

Unvollständig, aber ein guter Showcase, denke ich.


----------

