Re: [whatwg] Proposed addition to Drag and Drop API
I did a bit of reading about what the WhatWG spec says setDragImage should do and wanted to ensure I understand what the spec is saying and how Webkit is behaving. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dom-datatransfer-setdragimage The spec says defines setDragImage as: setDragImage(element, x, y) Element argument is defined as: If the element argument is an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified). This says, if I'm understanding it correctly, that I can provide any element as the first argument and a bitmap image will be generated as a drag image. This would allow me to accomplish what I'm trying to do (setting a small drag element to represent a larger draggable container). However, in my testing, Webkit will not render anything unless the element specified is an image. Am I misunderstanding the spec, or might this be a bug in the implementation? Thanks, - Alex On Friday, June 29, 2012 at 4:37 PM, Alex Bain wrote: @Ryosuke - I do not have a concrete proposal but would be interested in helping to work one out. I had idly considered a content attribute but think that specifying an element (perhaps via a function called setDragElement()) would be a simple implementation. @Daniel - I had thought that was possible but in my testing I was not able to get it to work. I had tried referencing an existing element as well as creating a new element but neither were visible while dragging [in Chrome]. On Friday, June 29, 2012 at 4:30 PM, Daniel Cheng wrote: Can't you use setDragImage() and pass it the element that holds the post title? Daniel On Fri, Jun 29, 2012 at 4:27 PM, Ryosuke Niwa rn...@webkit.org (mailto:rn...@webkit.org) wrote: On Fri, Jun 29, 2012 at 4:24 PM, Alex Bain a...@alexba.in (mailto:a...@alexba.in) wrote: I would prefer not to visually drag the entire post around (which is what happens if I set draggable to true on the post container). My goal is to set draggable on a container element and only show a small element when the user starts dragging. Ah, that's an interesting use case. Thanks for clarification. Do you have a concrete proposal for this? (e.g. adding new content attribute / element). - Ryosuke
[whatwg] Proposed addition to Drag and Drop API
Hello, I've spent the past few days working with the Drag and Drop API and I'd like to propose an addition to the spec to aid developers and designers in creating accessible drag interfaces. **Use case:** I'm developing an app that allows users to drag pieces of user generated content (Posts) from one part of the app to another. A Post is represented as a DOM subtree with multiple components - a title, some images, text, and so forth. I wanted to create an interaction where the user could click and drag anywhere on the Post (large click target for accessibility purposes), see a subset of the Post as a drag indicator (the title, for example), and then be able to drop that elsewhere in the app. **Existing solutions:** 1) I can define a custom drag image that is shown during drag. 2) I can define a custom canvas element that is shown during drag. 1) In this situation a custom drag image would not solve the problem. I would not be able to predefine images for all possible post titles. I could represent all drag actions with a single image but I believe that providing something contextually relevant (an actual component of the post) would be of benefit to users. 2) The custom canvas element could solve this problem but feels unwieldy. **Proposed solution:** In the scenario above I would prefer to define a custom drag element, set the innerHTML to a component of the Post (title), and then style the element itself in CSS. Thoughts? - Alex
Re: [whatwg] Proposed addition to Drag and Drop API
I would prefer not to visually drag the entire post around (which is what happens if I set draggable to true on the post container). My goal is to set draggable on a container element and only show a small element when the user starts dragging. On Friday, June 29, 2012 at 4:21 PM, Ryosuke Niwa wrote: On Fri, Jun 29, 2012 at 4:12 PM, Alex Bain a...@alexba.in (mailto:a...@alexba.in) wrote: I've spent the past few days working with the Drag and Drop API and I'd like to propose an addition to the spec to aid developers and designers in creating accessible drag interfaces. **Use case:** I'm developing an app that allows users to drag pieces of user generated content (Posts) from one part of the app to another. A Post is represented as a DOM subtree with multiple components - a title, some images, text, and so forth. I wanted to create an interaction where the user could click and drag anywhere on the Post (large click target for accessibility purposes), see a subset of the Post as a drag indicator (the title, for example), and then be able to drop that elsewhere in the app. You can't use draggable content attribute? http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute - Ryosuke
Re: [whatwg] Proposed addition to Drag and Drop API
@Ryosuke - I do not have a concrete proposal but would be interested in helping to work one out. I had idly considered a content attribute but think that specifying an element (perhaps via a function called setDragElement()) would be a simple implementation. @Daniel - I had thought that was possible but in my testing I was not able to get it to work. I had tried referencing an existing element as well as creating a new element but neither were visible while dragging [in Chrome]. On Friday, June 29, 2012 at 4:30 PM, Daniel Cheng wrote: Can't you use setDragImage() and pass it the element that holds the post title? Daniel On Fri, Jun 29, 2012 at 4:27 PM, Ryosuke Niwa rn...@webkit.org (mailto:rn...@webkit.org) wrote: On Fri, Jun 29, 2012 at 4:24 PM, Alex Bain a...@alexba.in (mailto:a...@alexba.in) wrote: I would prefer not to visually drag the entire post around (which is what happens if I set draggable to true on the post container). My goal is to set draggable on a container element and only show a small element when the user starts dragging. Ah, that's an interesting use case. Thanks for clarification. Do you have a concrete proposal for this? (e.g. adding new content attribute / element). - Ryosuke
