New answers tagged drag-n-drop
How about showing groups with an "auto-suggest" capable selection list. These group could be further put in a responsive grid(organize as your layout rule dictates). You can additionally show selected items in a tag cloud like component like Group #3
Make the object highlight when you hover it (it's your choice how to do this) Use a simple animated hand cursor when hovering the object (see example, it should be enough to show that the item is draggable)
Setting cursor:move to the four-way arrow on hover is the most obvious indication that something is draggable/movable. Pretty much the standard indicator on all OS's.
What you're implementing there is an unnecessarily unconventional user interface paradigm. Just do it like nearly every well designed GUI application has since the 1984 Macintosh. To select stuff, have the user pick a selection tool from a toolbar (if necessary: perhaps it is not: simple programs don't need toolbars. If every action needs something to be ...
Even if you convey the draggability of the selection, users will still likely be confused and think that it drags the item selected rather than the selection. For example, they will think it drags the plate to the couch instead of it selecting the couch. I know you currently have another tap function, but unless selection of items is extremely low priority ...
Another option is really making it "float" - i.e. make it bob up and down ever so gently. That, to me, would be a very clear clue that the object is not fixed but can be moved around, and dragging is the obvious way to do that.
The SELECTED object looks like tooltip or label. I think a pointer should be more like an object, as it used as a control. I think pointer could be used without excessive SELECTED notion. Still you could use tooltip. To show the interaction abilities ("liveness") of the pointer you could use unobtrusive animation with rather long "steady" state, see image ...
For issues like this I find it best to look at how other interfaces handle it. That way part of the user training has already been done - you don't need to reinvent the wheel. In this instance the first thing that came to mind is Pegman for Google Maps Streetview. Google handle this issue by placing the draggable indicator in a separate toolbar 'off map' ...
If you want to drag a sign perhaps you can add another sort of indication that the object moves, i.e. However I do think it might feel unnatural to the user to drag a sign around. Clicking on object and make the sign move on to the new object would be a more natural behaviour for the user. Users always assume that the objects are the ones that are ...
Give the objects shadows and hard outlines upon mouseover.
In my opinion the box with the text "Selected" is unnecessary. And the dots on it look like decoration. I like the shadow idea though. Have you considered highlighting the whole object with a glow effect around its edges? You could also change the mouse pointer while hovering over draggable object into a grasping hand, animating the grasping move.
There are many good ways of doing this, but the best ones provide an affordance like a handle, sometimes indicated by a grid of dots or rule lines, along with the cursor change to a hand. See the example from GMail, but note that the way it works in GMail is not draggable; it is used to indicate "Move This". I'm including the image because I like the ...
Simple yet effective - change the mouse cursor to a 'hand' when hovering over the draggable item.
Top 50 recent answers are included