[whatwg] Limitations of the DnD API

[Stef Epardaud]

Hello,

I'm trying to implement the picture reordering feature of picasa in
HTML5 and I'm having several problems.

The feature is as follows:

- I have a list of small pictures arranged in a sequence of lines
- I can select or unselect pictures by clicking them
- I can drag the selected pictures to a new location, to reorder them
- When I start dragging I have a drag image that shows what is being
  dragged
- It is possible to select non-continuous ranges of pictures
- Pictures are arranged in sections represented by a picture-sized box
  with the name of the section, followed by the section's pictures
  themselves
- It is possible to select a section, in which case all its pictures are
  selected
- When dragging, I want to update the drag image with information about
  what happens should you drop things over here

I have tried several approaches for setting the drag image:

- Use Selection to instruct the browser of what is selected, and leave
  the drag image alone, as this gives me the best drag image since
  non-continuous images are represented with the selection "holes" in
  the drag image.
- Create a new DOM element to represent the selection and put some info
  in there like how many images are selected and a few of the images
  stacked together.
- The same using a canvas.

Using the window.getSelection is nice visually but there's no way to
update the drag image with contextual information. Also when adding the
section boxes to the selection, their text becomes visually selected and
that looks bad.

I did not find it possible to use a new DOM element to represent the
selection, unless I append it to the document, which looks bad, since
it's only meant for the selection.

I used the canvas for the same feature, and struggled really hard
because it's not meant for laying out components (especially text and
breaking): I just wanted to put some of my selected elements (divs
really) in the canvas and it turns out I can only draw images and text
manually, not copy any (visible) element from the DOM.

Also using the canvas, once I set the DataTransfer.setDragImage to the
canvas, I cannot update it anymore with contextual information. It seems
this becomes unrelated to the real canvas, which I can still change (I
see it change if I add it to the document).

So I propose a few features:

- Allow the Selection.addRange API to specify whether there should be a
  visual information that the text is selected or not. When selecting a
  whole element, the browser can show (and FF does for example) that it
  is selected, no need to also show the text is selected too (although
  the default current behaviour is good).
- Allow access to the browser's drag image when he makes it himself
  (when not setting it, it uses the Selection), as something we can
  modify… canvas, DOM, ImageData, I don't care :)
- Allow using non-visible DOM elements (and those not in the Document)
  for drag image. Also keep track of their modifications.
- Keep track of modifications to the Canvas when using a Canvas as drag
  image.

If there's anything I missed (that would let me do what I want) don't
hesitate to let me know, that would help me :)
Also don't pay too much attention to the features I describe, they might
be stupid, but if my problems are real (and not just cause by my bad
usage of the API), it would be nice to find a way to fix those problems.

Thanks.
-- 
Stéphane Epardaud