Re: Comments on drag and drop

Ian Hickson wrote:
> On Thu, 20 Sep 2007, Mihai Sucan wrote:
>> The whole drag-and-drop API should specifically allow (mention in prose) 
>> that scripts can:
>>

 >....

> 
>> 8. Two CSS pseudo-classes should be defined:
>>
>> a) One pseudo-class which matches the source element being dragged 
>> :drag-src. KHTML already implements this with the :-khtml-drag 
>> pseudo-class. [6]
>>
>> b) Another pseudo-class which matches the possible target element (when 
>> the user moves the pointer over any other element) :drag-dest.
> 
> Agreed; however, this is out of scope for this spec. We may suggest it in 
> the rendering section, though.
> 
> 
>> 10. I find both of the descriptions of the whole drag and drop API 
>> better on Microsoft [5] and Apple sites [6], when compared to the HTML 5 
>> specification. Maybe you could take a look and see what could be done to 
>> "ease" the wording.
>>
>> Currently, the spec seems to lack a good overview (from "above") of how 
>> everything works.
> 
> Yeah, we'll add an introduction section with examples and diagrams in due 
> course.
> 

There are two distinct cases or modes of drag-n-drop.

1) Desktop level D&D when data is being dragged between different 
application domains. E.g. text selection from MS Word to be dragged in 
some <textarea> or <htmlarea> on the web page in some UA. That is pretty
much standard copy-n-paste operation with some system supplied 
visualization.

2) Application level D&D. In case of web page(s) in UA that is dragging 
(moving/copying) of DOM elements from one container to another.
Online sample is [2].

What case from the list above we are going to cover?

-----------------------------------

One possible implementation [1] that covers case #2:

Three CSS attributes:

   accept-drag: selector( ... );

      'accept-drag' defines DOM elements that can be dragged into
      the element. It declares element as a "drop-target" for
      all DOM elements matching the selector.

   drop: insert | append | prepend | recycle;

      'drop' used on element with defined 'accept-drag' defines
      how dragged DOM element will appear in this drop-target
      after drop.

   dragging: none | copy-move | only-move | only-copy;

      'dragging' enables element to be dragged and defines how
      it is allowed to be dragged.

CSS flags (pseudo-classes):

   :copying

      ":copying" flag is set for dragged element when it is copied.
      Dragged element is drawn near the mouse pointer and
      this pseudo-class is used for styling copying state.

   :moving

      ":moving" flag is set for dragged element when it is moved.
      This pseudo-class is used for styling moving state of the
      dragged element.

   :drop-target

      ":drop-target" flag is 'on' for all elements that can
      accept-drag of current dragged element.
      This flags helps to implement "UI discoverability" of
      D&D operation. Properly styled it gives visual clue
      of where dragged element can be dropped.

   :drag-over

      ":drag-over" flag is set for the current drop-target
      element (if any). This pseudo-class allows to
      style current active drop-target when dragged
      element is over it.

There are also DOM implementation specific events.
In our case they defined in [1].

Attributes and flags above allow to implement application level D&D
without any scripting - by just using declarations.

For support of Desktop level D&D UA can wrap system D&D object
into shadow DOM element with predefined id or class and use mechanism
defined above.

Example, declaration:
(assumes that UA creates draggable element-wrapper with the id 
#sys-dd-envelope and attribute @content-type)

textarea.dragaware
{
   accept-drag: selector( #sys-dd-envelope[content-type="text/plain"] );
   drop:insert;
}

will allow to enable to D&D of plain text only coming from other 
applications.

Links:
[1] http://www.terrainformatica.com/wiki/doku.php?id=h-smile:drag-n-drop
     - drag-n-drop support in h-smile core.
[2] http://demo.script.aculo.us/shop
     - typical application level D&D - shopping cart.


-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Sunday, 17 February 2008 21:26:14 UTC