Opened 10 years ago

Closed 4 years ago

#9593 closed enhancement (patchwelcome)

[css][docs] define areas within a drag handle that are not draggable

Reported by: Adam Peller Owned by: Eugene Lazutkin
Priority: high Milestone: 1.13
Component: Documentation Version: 1.3.2
Keywords: Cc: yoav@…
Blocked By: Blocking:

Description

From Yoav Rubin:

A drag handle is a property of a node within a drag source, there are scenarios that part of that node should act as handle and part of it not. There is a need to allow defining a subtree of a drag handle node as non-draggable, and moreover, further define within that non-draggable subtree, a sub-subtree that would act as a drag handle.

The following solution was already partially implemented in Websphere sMash Appbuilder (in the form editor) and in IBM Application Creator for business users

In order to do so the following changes should be made:

A new marker class should be defined - notDojoDndHandle

dojo.dnd.Source should be slightly modified (attached is the modified file), only a single code line was added see line 464 (if(dojo.hasClass(node, "notDojoDndHandle")){ return false; })

Moreover, there is a need to tell the user which areas are draggable and which are not, this should be done by using the handle draggabililty classes - dojoDndHandle and notDojoDndHandle by simply allowing these classes to define the cursor. Attached is the modified dnd.css file with these classes.

More info in this can be found here:

http://dojocampus.org/content/2009/06/09/modifying-the-dragability-of-nodes-along-a-widgets-dom-tree/

and

http://dojocampus.org/content/2009/06/23/appropriately-styling-the-drag-handles/

Change History (14)

comment:1 Changed 10 years ago by Adam Peller

Cc: yoav@… added

comment:2 Changed 10 years ago by Eugene Lazutkin

Status: newassigned

#9542 is the dup of this ticket.

comment:3 Changed 10 years ago by Eugene Lazutkin

Resolution: fixed
Status: assignedclosed

(In [19085]) dnd: minor tweak to improve flexibility of dragging with handles, thx Yoav Rubin, !strict, fixes #9593.

comment:4 Changed 10 years ago by yoavrubin

Resolution: fixed
Status: closedreopened

This change is not enough, please take a look at http://dojocampus.org/content/2009/06/23/appropriately-styling-the-drag-handles/

Basically, since within a drag handle area there may be a non-handle area, there is a need to notify the user about it, most probably by having a different cursor for the drag handle class and the non-drag handle class

comment:5 Changed 10 years ago by Eugene Lazutkin

I would say that first and foremost you should use colors (or shades of gray) or other visual clues (special font, images) to make draggable things discoverable. It is a little bit silly to expect users to hover cursor all over a web page to discover what's moveable before doing anything else. And any visual clues should be designed by UI designers, not us.

But I think it doesn't hurt to add some simple cursor definitions to dnd.css.

comment:6 Changed 10 years ago by Eugene Lazutkin

Resolution: fixed
Status: reopenedclosed

It looks like the robot sneezed and missed the changeset: [19086].

comment:7 Changed 10 years ago by Adam Peller

added test update from Yoav in [19098]

comment:8 Changed 10 years ago by Eugene Lazutkin

Resolution: fixed
Status: closedreopened

The last update is no good: absolutely no visual clues to what's draggable and what's not, almost impossible to hit "It", which is used to showcase "ignore", slightly easier to hit "em". Overall it is a good example of a bad UI design. The test should be reworked. Maybe a separate source should be used for that, or even a separate test case.

comment:9 Changed 10 years ago by Eugene Lazutkin

Milestone: tbd1.4.1

comment:10 Changed 10 years ago by Eugene Lazutkin

Milestone: 1.4.11.5

No changes for the code, but CSS should be updated to provide more visual clues.

comment:11 Changed 9 years ago by Eugene Lazutkin

Summary: define areas within a drag handle that are not draggable[css][docs] define areas within a drag handle that are not draggable

comment:12 Changed 9 years ago by Adam Peller

Milestone: 1.51.6

comment:13 Changed 9 years ago by bill

Milestone: 1.6future

(sadly) punting seemingly abandoned ticket and meta tickets to future

comment:14 Changed 4 years ago by dylan

Component: DnDDocumentation
Milestone: future1.12
Resolution: patchwelcome
Status: reopenedclosed

Given that dojo campus hasn't been around for years, closing this as patchwelcome, if there's work to be done in the Dojo docs.

Note: See TracTickets for help on using tickets.