Improve the drag-drop handling for dashboard customisation

* Dragged widget leaves visible ghost in original position
* The drop 'shadow' of where it will land in the region needs to look different from the actual widget being dragged

these 2 are actually one and the same thing, the ghost and the drop shadow u describe are both the placeholder of where the dragged item will land if it were released at that time, the fact that u experience it as a ghost, is probably due to

* Dragging blocks back to the tray is a very hit-miss experience, can't tell why sometimes it will, sometime won't take.

which I've spent quite some time looking at, but haven't found a reasonable solution

* It's unclear how you can remove blocks from regions (drag back to tray). A 'remove' contextual link would be much clearer.

seems like a good idea, but this should probably only be visible when customizing the dashboard. Which means we can't rly slide it in with contextual links

* Can't seem to remove the 'management' block from it's region. This might be by design?

heh? o.O

so any suggestions on how the placeholder should look different from actual blocks?

This (at least the part about not being able to move the Management block) is a bug, not a task.

subscribing

Re:

It's unclear how you can remove blocks from regions (drag back to tray)

Random musings:

FWIW, my instinct was to right-click the items in the dashboard to see if I could remove them.

I suppose another way to remove blocks would be to have a trash icon, but that's fraught with its own problems, and since a removed item dragged to the trash would have to magically show up in the tray again, that might feel pretty weird.

Again FWIW, I'm thinking that (since the dashboard is not a tree) there are really 3 directions to drag: left and right (for re-ordering) and down (for removal). So I'm wondering about leveraging the drag icon that looks like a tire iron (like +) in some way. I think annotating the arms with move left, move right, and remove, but probably somebody on this thread can come up with something more visual. Then click becomes self-documenting as to behavior.

I think dragging back to tray is intuitive enough -- if it actually worked (it currently works sometimes and doesn't work at all on Management for me).

I was able to get rid of Management only by going tothe Blocks admin page and unassigning the Management block from the Dashboard region it was in.

Biggest problem is that the region divs are floated: http://dev.jqueryui.com/ticket/4920

Still looking for a nice solution.

Using the jquery sortable tolerance:pointer option seems to work but makes other blocks flicker when hovered.

Still not found a solution for the very hit-miss experience.

Patch however adapts width of the block you are dragging to the region you hover. Thought I share it, before I lose it.

#6 jhodgdon

All I can tell you is that dragging back to the tray was not intuitive for me -- though my reaction my have been contaminated by the times it didn't work.

So, FWIW, I love the idea, but (using Seven, garland has its own issues):

1. The gray screen doesn't say "tray" to me.

2. I can see autosave for content*? But for administration, I'm not clear what problem this is solving. I'd say forget about it, and have Save button like everything else (which has the added advantage that I can Cancel out of an arrangement I don't like). if you want to autosave behind the scenes, and then erase all that with a Cancel, fine, but right now it's confusing.

3. If there's autosave, why a "Done" button? I guess that's parallel to the customize link, but the words ("Customize" vs. "Done") aren't parallel, and the visuals (+ sign vs button) don't relate for me either.

4. There doesn't seem to be a rhyme or reason to why the tray defaults are as they are. Am I really going to want to put "Powered by Drupal" on my dashboard? Why?

* And why can't this autosave code be adapted for overlay editing?

Well, this does seem to be the thread for drag-n-drop. #623326 seems complicated. Presumably the testing framework will come in handy making sure all this works together.

It's unclear how you can remove blocks from regions (drag back to tray). A 'remove' contextual link would be much clearer.

I agree. I consider myself very familiar with Drupal and web interfaces in general and I think that this is not intuitive at all, as suggested by an earlier poster. The problem I found was that I had quite a lot of items on my dashboard and I was scrolled down the the bottom of the page so I couldn't even see the 'try' to drag items back to it. I tried dragging items off the side of the page, right clicking on items, and using the contextual menus. To drag an item back to the tray that is off screen is not too easy as you have to drag and scroll at the same time.

A 'remove from dashboard' link in the contextual menu would be a safe bet. Panels does this too, and it works.

But what if contextual is disabled?

still unhandeling in Drupal 7.0-alpha1 #689006: On Customize dashboard can't disable the Management block
#drupal-7.0-alpha1

Can anyone do a visual update of what still needs to happen, and how critical it really is? Because some issues, seem to be "normal" to me.

Reroll of patch in #8 + jquery sortable option "tolerance" to "pointer"; seems to work much better (http://docs.jquery.com/UI/Sortable#option-tolerance)

oops

Can you give it another try?

Does this only happen with the patch applied?

yes

Caused by changes in jquery ui.

+++ modules/dashboard/dashboard.js	26 Mar 2010 18:28:28 -0000
@@ -104,6 +106,48 @@
+  /**
+   * While dragging, adapt block's width to the width of the region it is moved
+   * into.
+   *
+   * This function is called on the jQuery UI Sortable "sort" event.
+   *
+   * @param event
+   *  The event that triggered this callback.
+   * @param ui
+   *  An object containing information about the item that is being dragged.
+   */
+  sort: function (event, ui) {
+    var item = $(ui.item);
+
+    if (event.pageX > ui.offset.left + item.width()) {
+      item.css('left', event.pageX);
+    }
+  },

The PHPdoc seems to be a duplication of the PHPdoc just above. Is that on purpose? I'd be a bit more specific in the PHPdoc.

By the way, I tested this patch and it worked on Chrome. That said, I'm not convinced this is a 'critical bug'.

Since jquery ui 1.8 the drag&drop is much improved. Not longer critical.

Reroll with new comment.

This definitly works fine, no strange side effects anymore.
I can live with this solution!
If Dries likes the comment this is rdy to be commited.

I'll put this RTBC if someone disagree they can put it back.

Committed to CVS HEAD. Thanks.

dashboard not quite ready on my new install on wamp on vista:

1. should be a "loading..." indication after clicking 'customize dashboard' link. i thought i'd broke something and was about to click away when it popped up 6 seconds (!!!) after i clicked.
2. the grey blocks resize (become vertically fatter, see image) if you drag them around. why? seems unuseful to me, and the fattened blocks distort the alignment of the lean ones. matter of fact, why allow re-ordering at all?
3. said fattening occurs a good 2 seconds after youve done dragging the blocks. bit disconcerting to see them pop like that.
4. the little blob between 'syndicate' and 'management' is what happens to 'powered by drupal' if you drag it out of its place.

There is in alpha7.

I uploaded a screenshot for #31 comment.

The issue as it was was fixed and any additional dashboard issues should be separated.