Discussion :

[Revaroa]

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.

[tchize_]

tu as bien appelé setData lors du dragStart?

[Revaroa]

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);
    }	
}

[Revaroa]

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.