Drag-and-drop Naming (Responses)
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
$
%
123
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
|
 
Still loading...
ABCDEFGHIJKLMNOPQRSTU
1
TimestampWhich set of names is the best?Explain why you chose that?Got an alternative suggestion?
2
8/7/2013 13:50:41:drop / :can-drop / :no-dropit's short, simple and clearTRUE
3
8/7/2013 13:50:42:active-drop / :drop / :no-drop#VALUE!
4
8/7/2013 13:50:46:drop / :can-drop / :no-drop
5
8/7/2013 13:51:20:current-drop-target / :valid-drop-target / :invalid-drop-target
6
8/7/2013 13:52:08:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropI think it's specific to what we're trying to name. The other options, in my opinion, are more easily misconstrued.
7
8/7/2013 13:52:58:current-drop-target / :valid-drop-target / :invalid-drop-targetBest description of what it is
8
8/7/2013 13:53:01:drop / :can-drop / :no-drop, :current-drop / :valid-drop / :invalid-dropSize and clarity. I think the last one is the best combination of both.
9
8/7/2013 13:53:41:active-drop / :drop / :no-drop
10
8/7/2013 13:53:41:active-drop / :drop / :no-drop
11
8/7/2013 13:54:05:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropSorry, not enough room in the input field below, so I'm plugging my suggestion here:

:active-drop-target / :valid-drop-target / :invalid-drop-target
12
8/7/2013 13:54:33:drop / :can-drop / :no-drop
13
8/7/2013 13:55:05:current-drop-target / :valid-drop-target / :invalid-drop-targetIt may be the longest but it is appears to be the clearest and most intuitive.:current-drop-area, :valid-drop-area, :invalid-drop-area
14
8/7/2013 13:55:05:current-drop / :valid-drop / :invalid-drop
15
8/7/2013 13:55:13:current-drop / :valid-drop / :invalid-dropIt's the shortest yet most descriptive.

I would recommend :drop-current / :drop-valid / :drop-invalid as it would allow them to be sorted properly in IDEs.

We already follow this convention with other CSS properties such as border. I.e. border-style, border-size etc.

- neal.grosskopf@gmail.com
:drop-current / :drop-valid / :drop-invalid
16
8/7/2013 13:55:27:current-drop / :valid-drop / :invalid-drop:drop-current / :drop-valid / :drop-invalid
17
8/7/2013 13:56:07:current-drop-target / :valid-drop-target / :invalid-drop-target
18
8/7/2013 13:56:32:current-drop-target / :valid-drop-target / :invalid-drop-target
19
8/7/2013 13:57:50:drop / :can-drop / :no-drop
20
8/7/2013 13:58:01:drop / :can-drop / :no-dropShortest, but just as precise.
21
8/7/2013 13:58:19:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-drop
22
8/7/2013 13:59:01:current-drop / :valid-drop / :invalid-dropSeems to be the most consistently named set, although I would suggest more of a 'name-spaced' approach. (See suggestion.):drop-active / :drop-valid / :drop-invalid
23
8/7/2013 13:59:05:current-drop-target / :valid-drop-target / :invalid-drop-targetCSS needs more 3-words-stuff and I particularly thought that was the most accurate set of names.:drop-target / :drop-able / :drop-not
24
8/7/2013 13:59:07:current-drop / :valid-drop / :invalid-drop:active-drop/ :can-drop / :invalid-drop
25
8/7/2013 13:59:24:current-drop / :valid-drop / :invalid-dropGood balance between verbosity and conciseness. Chicken, opulent, tangerine
26
8/7/2013 13:59:35:current-drop / :valid-drop / :invalid-dropshort to code, easy to understand.
27
8/7/2013 13:59:42:active-drop / :drop / :no-dropShort and in keeping with existing :active pseudo.
28
8/7/2013 14:00:05:current-drop / :valid-drop / :invalid-drop:valid-drop, :invalid-drop to be consistent with :valid and :invalid form pseudo-selectors.
Maybe :current-drop should be :active-drop
:active-drop, :valid-drop, :invalid-drop
29
8/7/2013 14:01:22:drop / :can-drop / :no-dropSimple and self explanatory.
30
8/7/2013 14:01:22:current-drop-target / :valid-drop-target / :invalid-drop-target, :active-drop / :drop / :no-drop, :current-drop / :valid-drop / :invalid-dropIt explains what they are better than the other one which can cause confusion.
31
8/7/2013 14:02:19:current-drop / :valid-drop / :invalid-dropbrevity compared to similar alternative. all three terms share same structure: [adjective]-drop
32
8/7/2013 14:03:11:current-drop / :valid-drop / :invalid-dropI would not include "target" because the word target implies a destination, e.g the target pseudo class.

I think the the choice that I made most accurately describes the state of the elements
33
8/7/2013 14:03:22:current-drop / :valid-drop / :invalid-dropThis would be the closest though I would suggest to change it to:

:active-drop / :valid-drop / :invalid-drop

short yet very easy to understand what the selector is. The language of "current" would work, but I feel that using active-drop would be more in line with "industry standards".
:active-drop / :valid-drop / :invalid-drop
34
8/7/2013 14:03:25:current-drop / :valid-drop / :invalid-dropJust drop the `-target` suffix from the current.
35
8/7/2013 14:04:02:current-drop / :valid-drop / :invalid-dropbest combination of communicating purpose & succinctness
36
8/7/2013 14:04:15:current-drop-target / :valid-drop-target / :invalid-drop-targetLess ambiguous than the others. "Target" makes it clear it's not the thing being drug but the container to receive it.
37
8/7/2013 14:04:15:current-drop-target / :valid-drop-target / :invalid-drop-targetIt precisely explains what the pseudo-classes mean instead of using some related words that might remind you what it means.
38
8/7/2013 14:05:09:current-drop-target / :valid-drop-target / :invalid-drop-targetI prefer the verbosity of the set I chose. It's descriptive and easy to understand.
39
8/7/2013 14:06:03:current-drop-target / :valid-drop-target / :invalid-drop-targetMost descriptive ones.
40
8/7/2013 14:06:25:current-drop-target / :valid-drop-target / :invalid-drop-targetClarity > brevity, ironically.
41
8/7/2013 14:06:37:current-drop / :valid-drop / :invalid-dropThese are short but still descriptive
42
8/7/2013 14:06:52:current-drop / :valid-drop / :invalid-drop
43
8/7/2013 14:07:32:current-drop / :valid-drop / :invalid-drop"drop" is to vague, "current-drop-target" too verbose, "current-drop" juuuuuust right!
44
8/7/2013 14:08:05:drop / :can-drop / :no-dropMuch more simple, aaand explicit.
45
8/7/2013 14:08:32:current-drop-target / :valid-drop-target / :invalid-drop-targetClarity over brevity any time
46
8/7/2013 14:08:32:current-drop / :valid-drop / :invalid-dropI'd be OK with the long-form names. Cutting off -target would also be fine. The options with a plain :drop are bad, because there's ambiguity in whether that corresponds to a current or valid drop target.
47
8/7/2013 14:10:05:current-drop / :valid-drop / :invalid-dropI eliminated the first option because the suffix "-target" is not necessary as we already know we are referring to a target element. It just adds more bytes to the css without having any benefit.

I eliminated the second and the third mainly because ":drop" word doesn't make much sense to me when I read it. It doesn't convey what it stands for.

I chose the last option because the classes convey the meaning of what they stand for and they are short enough.
48
8/7/2013 14:10:15:current-drop / :valid-drop / :invalid-drop
49
8/7/2013 14:11:15:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropThe naked :drop isn't expressive enough. The verbose sets are more consistent and readable.
50
8/7/2013 14:11:18:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropBoth of these are the most explicit - they make the code easiest to read.
51
8/7/2013 14:12:31:active-drop / :drop / :no-drop"Active-drop" fits in nicely with the existing :active pseudo-class. ":drop / :can-drop / :no-drop" would be my second choice, but "can-drop" could potentially also mean "a target that accepts the currently offered drop", which is confusing.
52
8/7/2013 14:13:04:current-drop-target / :valid-drop-target / :invalid-drop-targetIt is clear as to what the thing actually is. Simplifying it to just "drop" makes it sort of ambiguous.
53
8/7/2013 14:15:14:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropThe word "valid" is expressive.
54
8/7/2013 14:15:31:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropClarity. "Dropping" -target reduces clarity, but can be learned. The others. The only thing is that I prefer the use of "active", because of its established use in CSS.:active-drop / :valid-drop / :invalid-drop
55
8/7/2013 14:16:11:current-drop-target / :valid-drop-target / :invalid-drop-targetThe most obvious choice, it's easy to read and understand.
My only suggestion is to delete the 'target' prefix which is redundant
:current-drop / :valid-drop / :invalid-drop
56
8/7/2013 14:16:27:current-drop-target / :valid-drop-target / :invalid-drop-targetClear and memorable
57
8/7/2013 14:18:10:current-drop-target / :valid-drop-target / :invalid-drop-targetThese are the longest, but clearest forms. Second runner up is :current/valid/invalid-drop, but it suggests that the selector is the element to be dropped rather than the drop-target.
58
8/7/2013 14:20:29:current-drop / :valid-drop / :invalid-dropClear enough. The first is overdone. The others are somewhat inconsistent.:drop-focus, :drop-valid, :drop-invalid
59
8/7/2013 14:23:33:current-drop-target / :valid-drop-target / :invalid-drop-targetbecause sounds more like actual css. and is more semantically understandable. most of all the -target part convinced me.
60
8/7/2013 14:25:37:current-drop-target / :valid-drop-target / :invalid-drop-targetIt has the clearest meaning. But "invalid" has the connotations of an error, rather than that the element will reject the dragged item.:current-dropzone / :accepting-dropzone / :rejecting-dropzone
61
8/7/2013 14:26:01:current-drop-target / :valid-drop-target / :invalid-drop-targetwe're talking about targets, so…
62
8/7/2013 14:28:39:current-drop-target / :valid-drop-target / :invalid-drop-targetThere is no existing ":current" pseudo, but there is a ":valid" and ":invalid". If you're going to build upon pre-existing nomenclature, then ":active-drop-target" should be used instead of ":current-drop-target", since there is no ":current" pseudo class, but there *is* an ":active".

:active-drop-target / :valid-drop-target /
63
8/7/2013 14:31:14:current-drop / :valid-drop / :invalid-dropThey seem to fit in with current psuedo classes:active-drop / :valid-drop / :invalid-drop
64
8/7/2013 14:32:38:active-drop / :drop / :no-dropSeems like the easiest to understand in English terms.
65
8/7/2013 14:36:30:current-drop / :valid-drop / :invalid-dropIt makes sense conceptually and isn't as verbose as #1
66
8/7/2013 14:40:37:current-drop / :valid-drop / :invalid-dropCompromise between being explicit/correct (where the first would be ideal) and short.

:drop is not specific enough, it could well be :matches(:current-drop, :valid-drop, :invalid-drop)
(This is the same issue that :link has vs. :any-link)
67
8/7/2013 14:42:50:current-drop / :valid-drop / :invalid-dropThe :current-drop / :valid-drop / :invalid-drop terms more clearly reinforces the others' meaning using natural English.

My alternative suggestion using ':dropping' for :active-drop-target to indicate that this is happening now.

:drop-yes is a very clear way to so, yes, the user can drop this here with :drop-no as its counter.

Using drop at the beginning of the pseudo classes helps group them.
:dropping / :drop-yes / :drop-no
68
8/7/2013 14:43:38:current-drop / :valid-drop / :invalid-dropBest balance of clarity and brevity.
69
8/7/2013 14:47:50:current-drop-target / :valid-drop-target / :invalid-drop-targetOptimize for explicit clarity, not for shortness.

The element being styled in this question is the "drop target", thus using "drop-target" in the pseudo class name makes this very clear.

There are other elements and pseudo-states involved in a drag-and-drop operation, thus shortening the pseudo selector without considering all related pseudo selectors would be a premature optimization which could result in confusion.
70
8/7/2013 14:47:58:current-drop-target / :valid-drop-target / :invalid-drop-target
71
8/7/2013 14:49:25:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropI prefer something more verbose to reduce cognitive load. Since target is better, because clearer than drop, how about :current-target / :valid-target / :invalid-target? I would chose that over any other.:current-target / :valid-target / :invalid-target
72
8/7/2013 14:51:22:current-drop-target / :valid-drop-target / :invalid-drop-targetMore explicit.
73
8/7/2013 14:53:54:drop / :can-drop / :no-drop
74
8/7/2013 14:57:24:current-drop / :valid-drop / :invalid-drop
75
8/7/2013 14:57:27:active-drop / :drop / :no-dropvery easy to understand and the names are short.
76
8/7/2013 14:57:40:active-drop / :drop / :no-drop
77
8/7/2013 14:58:10:current-drop-target / :valid-drop-target / :invalid-drop-target, :drop / :can-drop / :no-drop, :current-drop / :valid-drop / :invalid-drop
78
8/7/2013 15:01:10:active-drop / :drop / :no-dropI choose this answer because it seems more inline with the current set of pseudo selectors. I do think the selected answer could use something extra which i've added as an alternative solution:active-droppable / :droppable / :non-droppable
79
8/7/2013 15:02:18:active-drop / :drop / :no-drop":active-drop" mimics ":active"; ":drop"/":no-drop" are a sensical pattern we're used to from other places, eg Modernizr classes
80
8/7/2013 15:03:41:active-drop / :drop / :no-drop, :drop / :can-drop / :no-dropI think I mostly prefer ":drop / :can-drop / :no-drop" but can't decide between the two I picked.
I like them because they're concise and not too formal. :no-drop reminds me of nowrap (which should have had a dash really, not "white-space"...).
81
8/7/2013 15:06:07:current-drop-target / :valid-drop-target / :invalid-drop-target, :current-drop / :valid-drop / :invalid-dropI don't like the :drop because, as noted by different proposals reusing it for different purposes, it isn't clear what it means.

I choose to check the last one because it's very consistent while being short enough to be convenient, and the first one because it's very easy to understand.

However, I believe we can do better by hybriding the 4th and 3rd proposals.
:dropping / :can-drop / :cannot-drop
82
8/7/2013 15:14:17:active-drop / :drop / :no-dropThe set with "-target" is just too long.

The "valid-/invalid-" parts of the sets including it may cause some confusion with "valid/invalid" pseudo classes for HTML5 native form validation.

The ":drop / :can-drop / :no-drop" set is a bit counter-intuitive because 'drop' and 'no-drop' should be opposite to each other, but they aren't.

The ":active-drop / :drop / :no-drop" is short ans easy to remember, but still seems to be enough self-explanatory: 'no-drop' clearly means the area that is not suitable for dropping something, 'drop' it's the opposite of 'no-drop', and 'active-drop' is a special case of 'drop', namely one that is currently active. I believe this set is the best.
83
8/7/2013 15:24:01:current-drop-target / :valid-drop-target / :invalid-drop-targetmost descriptive; unambiguously
84
8/7/2013 15:26:07:current-drop-target / :valid-drop-target / :invalid-drop-targetLong winded but does what it says. Unambiguous.
85
8/7/2013 15:37:30:current-drop / :valid-drop / :invalid-dropI have a feeling that this is the most simple and understandable.
86
8/7/2013 15:37:31:drop / :can-drop / :no-drop
87
8/7/2013 15:39:37:current-drop-target / :valid-drop-target / :invalid-drop-target, :drop / :can-drop / :no-dropPretty ambivalent about the two selected options, but slightly preferring :drop / :can-drop / :no-drop because of the short names. Though they could also relate to the dragged element.
So the long names are definitely clearer.
:active-drop / :can-drop / :no-drop
88
8/7/2013 15:41:26:drop / :can-drop / :no-dropThey’re short, concise, and they say what they do. :drop is a little bit ambiguous, it might be better as :active-drop, or that might just be me.:active-drop / :can-drop / :no-drop
89
8/7/2013 15:41:30:active-drop / :drop / :no-drop
90
8/7/2013 15:41:52:active-drop / :drop / :no-dropEs simple y se entiende a la primera.
91
8/7/2013 15:45:18:active-drop / :drop / :no-dropShort and simpler, yet explicit enough.
92
8/7/2013 15:45:48:active-drop / :drop / :no-drop
93
8/7/2013 15:48:05:current-drop-target / :valid-drop-target / :invalid-drop-target
94
8/7/2013 15:54:49:current-drop-target / :valid-drop-target / :invalid-drop-targetThe first entry is the only one which actually explains the temporal state of the element. The other options sound good, but upon seeing them I'd have to look up what they actually correspond to - the names just aren't descriptive enough. I don't see any particular downsides to the longer names (especially if they never get prefixed versions).
95
8/7/2013 15:55:03:current-drop / :valid-drop / :invalid-dropFrom the given options: Descriptive enough to know what they mean without confusion for someone new to drag-and-drop, and still relatively short.

My main concern is that since the :active and :current selectors have different semantics, whichever :X-drop ends up using, it should have the same sort of semantics to make it easier to intuit what's going on as a newcomer to drag-and-drop who already knows what :active does.

My main concern is making sure that the :X-drop follows similar semantics for :active or :current. I think :active is more aligned here.

:active-drop, :valid-drop, :invalid-drop
96
8/7/2013 15:55:23:current-drop-target / :valid-drop-target / :invalid-drop-target:drop-active, :drop-valid, :drop-invalid is better, because in a vertical list of selectors it is easier to scan read, as all the 'drop-' prefixes line up, eg:

.class:drop-active,
.class:drop-valid { ... }
:drop-active, :drop-valid, :drop-invalid
97
8/7/2013 15:58:44:current-drop-target / :valid-drop-target / :invalid-drop-target
98
8/7/2013 16:02:07:active-drop / :drop / :no-drop:dropping / :drop / :no-drop
99
8/7/2013 16:09:22:drop / :can-drop / :no-drop
100
8/7/2013 16:09:24:current-drop / :valid-drop / :invalid-dropShort but descriptive, easy to recognise/remember.
Loading...
 
 
 
Form Responses