The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Drag & drop quiz styling issues

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #244105

    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.


    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!


    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?


    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:

    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!


    Moved to JS area

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.