Jump to content
Search Community

Draggable selection highlight trouble

PawleyBoboli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

 

Draggable_Highlite.jpg

 

Any help is greatly appreciated,

 

--Kevin

Link to comment
Share on other sites

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!!

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...