Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

GWT et Vaadin Java Discussion :

Drag and drop


Sujet :

GWT et Vaadin Java

  1. #1
    Nouveau membre du Club
    Drag and drop
    Bonjour,

    J'essaie d'appliquer un exemple que j'ai trouvéi, il me change bien la couleur de fond au moment du addDragOverHandler Mais event.getDataTransfer().getData("text") ne m'affiche pas l'url.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
     
    Window.alert(" url:" + event.getDataTransfer().getData("text"));


    Je ne comprends pas, ça fait plus d'une heure que je cherche à le résoudre, je n'y arrive toujours pas.

    Quelqu'un aurait une idée s'il vous plaît?

    Merci.

  2. #2
    Expert éminent sénior
    tu as bien appelé setData lors du dragStart?
    David Delbecq Java developer chez HMS Industrial Networks AB.    LinkedIn | Google+

  3. #3
    Nouveau membre du Club
    Salut,

    Oui, comme dans l'exemple :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    public class DragImage extends Image{
    
    	public DragImage() {
            super();
            initDnD();
        }
    
        private void initDnD() {
            // enables dragging if browser supports html5
            getElement().setDraggable(Element.DRAGGABLE_TRUE);
            addDragStartHandler(new DragStartHandler() {
    
                @Override
                public void onDragStart(DragStartEvent event) {
                    // attach image URL to drag data
                    event.getDataTransfer().setData("text", getUrl());
                    
                }
            });
        }
    }


    Ensuite :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    public class MyWidget extends AbsolutePanel{	
    
        private Image img = new Image("http://www.icone-png.com/png/36/36049.png");
    	
        public MyWidget() {    	    	
    
        	DragImage image = new DragImage();
        	image.setUrl(img.getUrl());
        	
        	final DropAbsolutePanel target = new DropAbsolutePanel();
            target.getElement().getStyle().setBorderWidth(2.0, Unit.PX);
            target.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
            target.getElement().getStyle().setBorderColor("black");
            target.setSize("400px", "400px");
    
            target.add(new Label("url : " + img.getUrl()));
            // show drag over effect
            target.addDragOverHandler(new DragOverHandler() {
    
                @Override
                public void onDragOver(DragOverEvent event) {
                    target.getElement().getStyle().setBackgroundColor("#00f");
                }
            });
    
            // clear drag over effect
            target.addDragLeaveHandler(new DragLeaveHandler() {
    
                @Override
                public void onDragLeave(DragLeaveEvent event) {
                    target.getElement().getStyle().clearBackgroundColor();
                }
            });
    
            // enable as drop target
            target.addDropHandler(new DropHandler() {
    
                @Override
                public void onDrop(DropEvent event) {
                    event.preventDefault();
                    // not sure if the calculation is right, didn't test it really
                    int x = (event.getNativeEvent().getClientX() - target.getAbsoluteLeft()) + Window.getScrollLeft();
                    int y = (event.getNativeEvent().getClientY() - target.getAbsoluteTop()) + Window.getScrollTop();
                    target.getElement().getStyle().clearBackgroundColor();
                    Window.alert("x: " + x + ", y:" + y + " url:" + event.getDataTransfer().getData("text"));
                    // add image with same URL as the dropped one to absolute panel at given coordinates
                    target.add(new Image(event.getDataTransfer().getData("text")), x, y);
                }
            });
            
            this.add(image);
            this.add(target);
        }	
    }

  4. #4
    Nouveau membre du Club
    Salut,

    Ça y est ça fonctionne, j'ai juste modifié comme ceci
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // Ceci fonctionne
    String imgUrl = img.getUrl();
    image.setUrl(imgUrl);    
     
    // Ceci ne fonctionne pas, d'ailleurs je comprends pas pourquoi
    // image.setUrl(img.getUrl());


    Seulement, après avoir drag and drop l'image de l'extérieur du panel vers le panel, je voudrais le faire glisser déposer à l'intérieur.
    J'ai donc rajouté ceci dans la classe DropAbsolutePanel :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    @Override
    public HandlerRegistration addDragStartHandler(DragStartHandler handler) {
        return addBitlessDomHandler(handler, DragStartEvent.getType());
    }


    Ensuite je ne sais comment faire la suite :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    target.addDragStartHandler(new DragStartHandler() {
        @Override
        public void onDragStart(DragStartEvent event) {
            // Je ne sais pas quoi mettre ici
        }
    });


    Une idée? peut-être event.setData("IdImage", "Unique");

    Merci.

###raw>template_hook.ano_emploi###