Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
OSUblake

Select text on Draggable

Recommended Posts

Is there a way to select text on a Draggable? Removing the user-select style doesn't work. I can add the following to an element, but that seems super hacky. Is there an easier way?

Draggable.create(myElement, {
  allowEventDefault: true
});

myElement.onselectstart = function() {
  TweenLite.set(myElement, { userSelect: "text" });
};
  • Like 1
Link to comment
Share on other sites

I just posted about this in my demo for off canvas menu. Hopefully both of us can find a good working solution. This one works great until you drag to left too much (in my case).

 

Also FYI you cannot select text in IE10 this route.

Link to comment
Share on other sites

Hi Guys  :)

 

Do you think that Makes Sense?  on your mouse/touch move which one should fire , Select or Drag ?... could you provide a live Demo of that behavior .

 

anyway , i think you need Draggable trigger . maybe Draggable.disable() / .enable() can help too .

Link to comment
Share on other sites

I left a link to the squarespace demo in my original thread on the off canvas topic. That's the demo that is sparking this discussion. It's the one where you told me to leave the menu still viewable at 15 pixels.

Link to comment
Share on other sites

looking at http://www.squarespace.com/ I do not see a way to drag open the menu (tested in iOS safari and desktop chrome mac). I can only open it by clicking on the hamburger menu. Dennis, are you saying squarespace has the behavior you want to use or am I missing something?

 

I don't have a solution (maybe Jack will have some thoughts) but I tend to side with Diaco. Seems like it could be quite challenging trying to determine the user's intent of wanting to drag or select text. Any of my ideas that seem remotely possible are also quite clunky. Even if you could detect a long press and disable() the Draggable then you have to figure out the right time to enable() it again. 

 

Its definitely an interesting challenge and a good question. If anyone has any thoughts on how the general logic should work inside Draggable we're interested in ideas.

  • Like 1
Link to comment
Share on other sites

I know this is kind of an unusual thing to do, but I wanted to check anyways. His demo does look weird when you realize that you can't select the text. But on the other hand, you probably wouldn't do something like this unless touch was enabled, and touch requires a long press to select text.

 

I know using Hammer.js would probably make this much easier, but here's how I did it by using disable/enable. It's still a little rough around the edges, and I didn't take into account other events like click or the initial text selection, but still a good starting point.

 

It is definitely more responsive using touch over the mouse.

 

See the Pen 2708a9d4f4d2f040f851a33f9caba5cd?editors=001 by osublake (@osublake) on CodePen

 

And here's the version with hack listed above.

 

See the Pen 36b4c0c86e793a54f4ff706e5f80c85b by osublake (@osublake) on CodePen

Link to comment
Share on other sites

That's a nice try OSUblake. Unfortunately, text is still hard to select and copy in the first demo you listed 

See the Pen 2708a9d4f4d2f040f851a33f9caba5cd?editors=001 by osublake (@osublake) on CodePen

 

TO EVERYONE IN THIS THREAD

Detecting for touch can have false positives hence the example must support both interactions (touch and mouse). Think about all the Windows products out there today and even iPads that have keyboard and mouse used in conjunction with touch enabled devices.

Link to comment
Share on other sites

looking at http://www.squarespace.com/ I do not see a way to drag open the menu (tested in iOS safari and desktop chrome mac). I can only open it by clicking on the hamburger menu. Dennis, are you saying squarespace has the behavior you want to use or am I missing something?

 

I don't have a solution (maybe Jack will have some thoughts) but I tend to side with Diaco. Seems like it could be quite challenging trying to determine the user's intent of wanting to drag or select text. Any of my ideas that seem remotely possible are also quite clunky. Even if you could detect a long press and disable() the Draggable then you have to figure out the right time to enable() it again. 

 

Its definitely an interesting challenge and a good question. If anyone has any thoughts on how the general logic should work inside Draggable we're interested in ideas.

 

When the menu opens on squarespace the ability to click anywhere to close is there (with the exception of the closed state you mentioned). I know this is challenging, but it has been done in the wild many times. Would love to have a great solution here. Again, the code snippet suggested in this initial thread post doesn't allow text selection in WIn7 IE10.

Link to comment
Share on other sites

I know this is challenging, but it has been done in the wild many times.

 

 

Please provide examples of websites that use the technique you are trying to replicate with Draggable. We will definitely check them out.

  • Like 1
Link to comment
Share on other sites

The first version has to choose dragging or selecting, so there isn't a lot of tolerance. Here's the hacked version working with IE. I just moved it to the onPress callback.

 

See the Pen 36b4c0c86e793a54f4ff706e5f80c85b?editors=001 by osublake (@osublake) on CodePen

 

Dragging left and right will also select text which doesn't look right. I think the best way to do this is to base the action on the type of event, pointer or mouse. If you look at Windows, the touch and mouse motions aren't the same. For mouse input it usually involves moving to certain spot and hovering to trigger it, while touch requires swiping in a certain direction. And with touch you can't quickly select text because it has its own UI with drag handles.

 

Some gestures for Windows

http://windows.microsoft.com/en-us/windows-8/mouse-keyboard-whats-new

http://windows.microsoft.com/en-us/windows-8/touch-swipe-tap-beyond

  • Like 1
Link to comment
Share on other sites

OSUBlake Nicely done, but selecting text in either direction still moves the window and menu slightly. If you drag to the left the menu will eventually open making copying and pasting a chore.

 

Carl: I'm in the middle of gathering. Will post back with links. I assure you though they are out there just don't have a collection off the top of my head.

  • Like 1
Link to comment
Share on other sites

Cool. Yeah, I thought I had seen this behavior on mobile apps quite a bit (like spotify) so I've took a quick cruise though my phone and I'm just coming up short. 

 

Blake - thanks for your diligent research. Incredible.

  • Like 1
Link to comment
Share on other sites

You can check if any text is selected using window.getSelection(), which you can then use as flag to determine if you should start dragging or not. It's still a little sloppy, and I think the click function might be making the menu disappear after selecting text. Maybe you could change it so that clicking anywhere only works if the menu is open. I'm sure with a little bit of rework it could be pretty functional. 

 

See the Pen 36b4c0c86e793a54f4ff706e5f80c85b?editors=001 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

An example almost there, but not quite.

 

1. http://kinglozzer.github.io/SwipeMe/demo/index.html

 

 

Aside: It think besides having examples to show, this is a problem in general felt by the community and something we can help give back that is rock solid.

 

Yup. Excellent research so far Blake. Keep it up rockstar.

Link to comment
Share on other sites

Blake: So I gave your demo a shot blake and adjusted a few more bits. I also removed the slight blur that takes place when selecting text.

Overall this is getting much closer so thanks tremendously for putting in all this work towards a solution o_/ \_o Same to you as well Carl.

 

Here's the demo updated as of 3:09pm EST with everything discussed up until this point 

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

 

I have yet to test myself in IE nor on any touch devices. Will do so this evening. Cheers Chaps.

Link to comment
Share on other sites

I combined my first two examples into something that I think will work. There's a lot more code, but most of that it is used to determine if a touch is a click since it's not using Draggable's onClick. It could probably be worked back into Draggable, but I'll just leave it for now.

 

See the Pen 351ac631e161d20014a2f0b7ee992345?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Blake,

 

This is getting better and better! (I've only checked Chrome on my MacBook). Text selection is great because you can drag left to right and click again within the text to clear what you have highlighted.

 

Only downside ATM from briefly looking is…

 

1. No longer can click anywhere in the doc to open the menu

Link to comment
Share on other sites

I did that because that is how the square space worked. One issue with clicking anywhere to open the menu is that after selecting some text and releasing the mouse, it's going to fire a click event, so you would need to do something like removing the event listener or canceling the event.

 

Draggable does a great job of handling different types of input, so it would probably be better to let it handle the events if possible. Plus it would reduce a lot of that code. I just separated them out to to test different ways of initiating the drag. The most important thing is to not start dragging at all if any text is selected,which will only happen with a mouse event. You can tell the difference between a mouse and touch event by looking at the event.type. 

  • Like 1
Link to comment
Share on other sites

Thanks for the tips Blake and of course the guidance so far.

 

Yeah, I guess I'll have to fine tune this for touch screens. Right now with all the updates so far and testing in Chrome on my Samsung Galaxy S4 I would rate this as somewhat unusable. Swiping is tough and selecting text to copy is non-existent. Menu text trigger also reacts oddly by requiring multiple taps to open the menu.

 

Selecting text by using the mouse of course is much better since we started across the board; tested in Chrome, Firefox, Safari and IE10 :)

Link to comment
Share on other sites

You had to keep tapping because on mobile devices clicks take 300ms to register, and mine were set for 200ms. That's why it's best to let GSAP handle all this.

 

I took Diaco's advice and added a trigger, which controls another Draggable created on the menu. It basically syncs the movements of the container and menu together. And all the events are now back inside the Draggable, with most of the logic residing in the liveSnap function. 

 

See the Pen fa9327ed305f96817ffbe0a50ed64282?editors=001 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

  • 1 month later...

I've been spending some time reiterating, testing and refining the off canvas menu demo using Draggable. Currently works well across testing platforms such as iPhone 6 and the Samsung Galaxy S4.

 

The current problem is that devices using touchstart will not allow text to be selected and copied.

 

Here's the updated demo for reference.

See the Pen 569ffceac4b0c1b3958ade9bd189ad94 by grayghostvisuals (@grayghostvisuals) on CodePen

Link to comment
Share on other sites

Ha ha. I was wondering if you were still doing this. It's looking good!  :D

 

You're code looks like it's based on the version before my last update. Did you not look at my last post? I refactored all the events back into the draggable. There's actually 2 different draggables now, but the sidebar one really doesn't do anything. It's just makes it a lot easier to stay in sync with the main draggable.

 

I don't know if those changes will have any effect on the problem you are having. What device is it not working for? I just tested it on my touchscreen in Chrome, and it works ok. I have to double tap to select some text, and then once it is selected, I can long-press to bring up the touch copy/select interface.

 

See the Pen fa9327ed305f96817ffbe0a50ed64282?editors=001 by osublake (@osublake) on CodePen

  • Like 1
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.
×