Drag & drop quiz styling issues

[grimski]

Hi there,

I have a working drag and drop quiz, put there are some slight design issues I’d like to iron out. I’ve probably been looking at this for a bit too long and could use some fresh eyes. I’ll put the link to the CodePen example and then my notes below.

Example: http://codepen.io/moy/pen/JKaPGN

1. On ‘dropping’ a draggable (yellow) item the height of the box changes. I imagine this is due to border. I don’t want to set a fixed height as some of the answers can be quite long so they will need to wrap.
2. If there’s a really long draggable (yellow) item, the text doesn’t wrap. This is because of `.missing-words__draggable { white-space: nowrap;}`. If you remove the nowrap it works great! …but then when the item is clicked and dragged it ‘jumps’ and text like ‘Co-operatives’ drops onto 2 lines.
3. (Maybe more JS this one) If you drag and answer “Private limited company” (top) and “Franchise (middle), drag move the final answer “Co-operatives” over the other answered boxes, does the item move around unusually like it’s trying to snap to something?

Thanks, hope someone can help!

[grimski]

Ok, so the 1st issue can be resolved by reducing the vertical padding by 2px top and bottom to accommodate the border. DUH. Don’t know why I didn’t do that before …must of thought box-sizing: border-box would sort it.

This might be better off in Javascript forum now? Although part of the 2nd issue could be CSS?

[grimski]

After some further playing around I think I’ve found the cause of both issues but I need a little help solving them. I think this would be better reassigned to the javascript form now though.

In regards to point 2, I think the text dropping to the next line is caused by a rounding error in jQuery. When the click/drag a width is set onto the item and it must be a pixel off. Any ideas how to fix this?

Here’s an updated CodePen example: http://codepen.io/moy/pen/RRYZVy

If you click/drag “Co-operatives” or “Private limited company” you will see the text break onto 2 lines.

For point 3, i’ve just realised if you answer one of the questions (so it goes green), then drag another item over it it goes behind the text – this is what’s causing the item currently being dragged to ‘wobble’. I’ve tried every which way to set a high z-index on the item being dragged but it’s not working – any ideas?

Thanks, hope someone can help!

[Paulie_D]

Moved to JS area

[Author]

Posts