Re: Drag and drop (and Internet Explorer)

[Andrea Boscolo]

Reading [1] seems like IE9 supports dataTransfer object only on images, links, and text. Starting from IE10 it supports d&d on any element (using the draggable attribute), and the file attribute to the dataTransfer object.

On IE9 try to use an hyperlink/image as a draggable.

[1] http://msdn.microsoft.com/en-us/library/ie/hh673539%28v=vs.85%29.aspx

On Wednesday, March 20, 2013 6:12:46 PM UTC+1, Helen wrote:

Hello all,

 

I've created a test project to experiment with native drag and drop (2.5.1).  It works in fine Firefox and Chrome, but in Internet Explorer the dropItem events don't fire.

 

Here is the code:

 

 public void onModuleLoad() {
  
  final TextBox textBox = new TextBox();
  
  final HTML dragItem = new HTML("<p>Drag this</p>");
  dragItem.getElement().setDraggable(Element.DRAGGABLE_TRUE);
  dragItem.addDragStartHandler(new DragStartHandler()
  {
    @Override
    public void onDragStart(DragStartEvent event)
    {
      event.setData("text", "id");
      event.getDataTransfer().setDragImage(dragItem.getElement(), 10, 10);
    }
  });  
  
  
  final HTML dropItem = new HTML("<p>Drop onto this</p>");
  dropItem.addDomHandler(new DragOverHandler() {
        public void onDragOver(DragOverEvent event) {
         textBox.setText("Dragging over dropItem");
        }
  }, DragOverEvent.getType());
  
  dropItem.addDomHandler(new DragLeaveHandler()
  {
      @Override
      public void onDragLeave(DragLeaveEvent event)
      {
       textBox.setText("");
      }
  }, DragLeaveEvent.getType());
  
  dropItem.addDomHandler(new DropHandler() {
        public void onDrop(DropEvent event) {
          event.preventDefault();
          Window.alert("Dropped!");
        }
      }, DropEvent.getType());
  
  FlowPanel fp = new FlowPanel();
  
  fp.add(dragItem);
  fp.add(dropItem);
  fp.add(textBox);
  
  RootLayoutPanel.get().add(fp);  
  
 }

 

Does anyone have any ideas?

 

Many thanks,

 

Helen

 

 

[Helen]

Hi Andrea,

 

Thanks for your suggestion.

 

I've tried using a link, and this doesn't work either.  If I use an image, then the dragover events work, but not the drop event.

 

It's worth noting that I'm experimenting in IE10, so according to the documentation you've highlighted all elements should work.

 

There is an example which works fine in IE here: http://gwt-cloudtasks.appspot.com/

with sample code here: http://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/mobilewebapp/src/main/java/com/google/gwt/sample/mobilewebapp/client/desktop/DesktopTaskEditView.java

 

I can't see that I'm doing anything different to the sample code, so it's a bit of a mystery as to why it doesn't work.

[Andrea Boscolo]

Check if DragDropEventBase.isSupported() and if not, stop trying :D According to [1] is not supported by ie6 and ie8 and there is a 'maybe' for everything else.

I can't see where the problem could be, you are doing the right things:
- set the element draggable;
- add a dragstarthandler to the element and use setData(...) in it;
- add a dragoverhandler on the element target;
- add a drophandler on the element target, use preventDefault() and consume the data with getData() (you are not doing that tough, hence try it).
See [2] from slide 54.

Then I'd try to use the native handlers (e.g, addDropHandler() and so on, instead of addDomHandler()) if supported by the widget. Or change the target widget. Also, as suggested in the commit [3], try to select the text before start to drag.

Can't say anything else, at the moment.

[1] http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/event/dom/DragEvent.gwt.xml
[2] http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/it//events/io/2011/static/presofiles/gwt_html5_a_web_develops_dream.pdf
[3] http://gwt-code-reviews.appspot.com/1420811

[Helen]

Many thanks for your additional suggestions.

 

I will give them all a try, but for the time being I've decided that native drag and drop is a long way off useable, so I've written my own implementation instead.

 

Helen