GWT를에서 Drag and Drop

GWT Dran and Drop site.

처음 접했을 때 소스를 보면서 첨 어렵다고 생각했다.
하지만 몇 년이 지난 지금 일일히 코딩하는거에 비해 너무나 편하다.. ㅋㅋ 당연하다.


일단 GWT Drag and Drop lib를 다운 받자.
http://code.google.com/p/gwt-dnd/downloads/list
 

이 내용은 GWT Drag and Drop 에서 가져온 내용이다. - 사이트 가기
1. 프로젝트 war - lib - jar를 복사한다.
2. 프로젝트 build path에 경로 추가.
3. <inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>  
4. 셋팅완료

실제 소스 코드를 보자.
 

  public void onModuleLoad() {
    // ensure the document BODY has dimensions in standards mode
    RootPanel.get().setPixelSize(600, 600);

    // create a DragController to manage drag-n-drop actions
    // note: This creates an implicit DropController for the boundary panel
    PickupDragController dragController = new PickupDragController(RootPanel.get(), true);

    // add a new image to the boundary panel and make it draggable
    Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");
    RootPanel.get().add(img, 40, 30);
    dragController.makeDraggable(img);
  }

1. PickupDragController를 생성한다.
2. PickupDragController의 argument는 
     1. AbsolutePanel만 들어간다. RootPanel은 AbsolutePanel을 상속받는다.
     2, 첫번째 argument에 drag될수 있는지 여부이다. false로 하게 되면 위 이미지는 drag and drop 되지 않는다.
3. Height, Width를 정의해야 한다.
    RootPanel.get().setPixelSize(600, 600);
4. Drag할 widget의 clickhandler등의 이벤트를 적절히 적용해야한다.

   IE the handler will only fire if drag sensitivity > 0
   In Firefox the handler will always fire when the mouse is clicked, even at the the end of drag operation

2번에 대한 참고용 소스이다.
PickupDragController(ap, true);에서 true, false를 변경하면서 Test 해보길 바란다. 

	
public void onModuleLoad() {
        VerticalPanel vp = new VerticalPanel();
	vp.setPixelSize(800, 800);
	vp.setBorderWidth(2);
	
	AbsolutePanel ap = new  AbsolutePanel();
	ap.setPixelSize(600, 600);
	vp.add(ap);
	RootPanel.get().add(vp);
	    
	// create a DragController to manage drag-n-drop actions
	// note: This creates an implicit DropController for the boundary panel
	PickupDragController dragController = new PickupDragController(ap, true);

	 // add a new image to the boundary panel and make it draggable
	 Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");
//	    RootPanel.get().add(img, 40, 30);
	  ap.add((img);
	  dragController.makeDraggable(img);
}

처음 소스는 참 쉽다.
뒤에 이어서 작업한다.