Re: [Bug 10712] Drag and Drop: Add an attribute to identify drop targets

--------------------------------------------------
From: "Maciej Stachowiak" <mjs@apple.com>
Sent: Friday, October 29, 2010 5:07 PM
To: "Laura Carlson" <laura.lee.carlson@gmail.com>
Cc: "Sam Ruby" <rubys@intertwingly.net>; "Paul Cotton" 
<Paul.Cotton@microsoft.com>; "HTML WG" <public-html@w3.org>; "HTML 
Accessibility Task Force" <public-html-a11y@w3.org>
Subject: Re: [Bug 10712] Drag and Drop: Add an attribute to identify drop 
targets

>
> We welcome discussion of DnD design on this mailing list or in the bug, if 
> anyone has input.
>
> Regards,
> Maciej
>
> On Oct 29, 2010, at 4:50 PM, Laura Carlson wrote:
>
>> Hi Sam, Maciej, and Maciej,
>>
>> Shelley has ask that the following to be brought to your attention.
>>
>> On 10/29/10, bugzilla@jessica.w3.org <bugzilla@jessica.w3.org> wrote:
>>> http://www.w3.org/Bugs/Public/show_bug.cgi?id=10712
>>>

I don't think that D&D is solely HTML thing. I've found it to be closer to 
CSS than to HTML per se.

Here is what I am using in CSS to give it D&D support:

D&D Properties:

  accept-drop : selector( ...from...)
       - defined on a container - selector(css selector) function defines 
source elements allowed to be dropped here.

  drop: insert | append | prepend
       - defined on a container - defines position where dropped element is 
placed.

  draggable: none | both | move | copy
       - defined on "draggable" elements to allow them to be dragged.

D&D State flags (pseudo-classes):

  :drop-target
       - is "on" when drag in in effect and the element has accept-drop that 
matches dragged element.

  :drag-over
       - is "on" for :drop-target element when draggable has arrived to it.

  :drag-source
       - is "on" for the element that requested drag.

  :moving and :copying
       - either one of these is "on" for the element being dragged.

  :drop-marker
       - is "on" for the placeholder element that represents the place
         where dragged item will land.

When D&D operation starts internal handler sets :drop-target
flags to all elements with satisfying  accept-drop:selector( ... ) 
selectors.
So CSS is able to highlight them.
:drop-target and :drag-over flags are also set in case of e.g. text drag
from other applications to UA window for elements that can accept
drop of text (<input> <textarea>, etc. ).

I suspect that these are constitute minimal set of things that need to
be added. At least it supports basic "shopping bag" and "tab reordering"
cases.

If needed I can provide a demo to play with.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 30 October 2010 20:28:02 UTC