Draggable selection highlight trouble

[PawleyBoboli 10 Likes (Newbie)]

Hi Folks,

 

I have a quiz online that has been using Draggable where learners drag & drop multiple choice answers onto a target image area.  Works great but every so often after a drag & release, the divs will get highlighted as if someone selected them for a copy/paste operation.  I am assuming it's cause by an accidental drag by the learner after letting go of the draggable item.  Also, it seems this happens more in Firefox and Safari, but I've not yet seen it in Chrome.

 

Is there a workaround for this?  Here is what it looks like when it happens:

 

 

Any help is greatly appreciated,

 

--Kevin

[Rodrigo 2,662 Likes (Superhero)]

Hi Kevin,

 

This is not a GSAP issue, but an HTML thing.

 

Looking in google I found these stack overflow posts:

 

http://stackoverflow.com/questions/9620122/stop-html-text-being-highlighted

 

http://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript

 

The second one should work with the onDragStart method, you could attach the event handler and then remove it if you want, otherwise you can run a loop through all the elements you don't want highlighted and leave it like this.

 

Although the first option would be the one of my choice, using a IE9 and older conditional to use the JS code:

 

http://caniuse.com/#feat=user-select-none

 

Please let us know how it goes, this will be helpful for other users.

 

Happy Tweening!!

[PawleyBoboli 10 Likes (Newbie)]

Thanks for this info Rodrigo.

 

I tried both of them and they both work.  The CSS version does not allow any selection at all if you apply it to body, div {} as suggested in the post, and happily, it does not interrupt Draggable from doing it's job correctly so that's cool.

 

The JavaScript version allows a selection to be made if you drag over anything on the page but then immediately releases (clears) the selection as soon as you mouse up.  This is good as well, however I found that if I dragged over more than one div highlighting multiple divs like in my image above, the script did not release the selected areas when you mouse up.  In other words, it worked for a single div selection, but not for a multiple-div selection.  This was in Safari on a Macbook Pro.   It seems to work in Firefox and Chrome.  I think the script could be adjusted to iterate through divs singley, but since there are no input fields or need for selection in my project, I'm just going with the CSS version for now.

 

Thanks so much for your help.

--Kevin