Drag and drop

Version imprimable

23/04/2016, 05h59
Revaroa

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:

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.
23/04/2016, 15h28
tchize_

tu as bien appelé setData lors du dragStart?

Salut,

Oui, comme dans l'exemple :

Code:

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:

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

Salut,

Ça y est ça fonctionne, j'ai juste modifié comme ceci
Code:

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:

1 2 3 4 @Override public HandlerRegistration addDragStartHandler(DragStartHandler handler) { return addBitlessDomHandler(handler, DragStartEvent.getType()); }
Ensuite je ne sais comment faire la suite :
Code:

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.