Jump to content
GreenSock

ZWK

Use Draggable but cant copy words in <div>

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

I have create a div like this:
<div id="content" >
<div id="textContent">
aaaaaaaaaaaaaa
</div>
</div>
 Draggable.create("#content", {
            type:"top,left",
            edgeResistance:0.5,
            bounds:window
        });

 

But I cant copy the words "aaaaaaaaaaaaaa". I have tried data-clickable="true". But I still cant set focus on the words.
 
Plz help me .
 
.
BTW I have a simple solution.But cant use throwProps.
<div id="textArea">
aaaaaaaa
</div>
<div id="content">
</div>
 Draggable.create("#content", {
            type:"top,left",
            edgeResistance:0.5,
            bounds:window,


            dragClickables:false,


            onDrag:function() {


               $( "#textArea").css({"top":this.y,"left":this.x});


            }
        });
And sorry about my terrible English... :roll:
 
Link to comment
Share on other sites

Yes, in order to make things draggable, the element's ondragstart and onselectstart must be set to an empty function (otherwise when you start dragging, the browser would either start highlighting text or dragging an image as if you wanted to drop it onto your desktop for copying). As far as I know, you can't have the parent be draggable and the child allow text selection like that. If anyone knows how to do it, I'm all ears. 

  • Like 1
Link to comment
Share on other sites

Yes, in order to make things draggable, the element's ondragstart and onselectstart must be set to an empty function (otherwise when you start dragging, the browser would either start highlighting text or dragging an image as if you wanted to drop it onto your desktop for copying). As far as I know, you can't have the parent be draggable and the child allow text selection like that. If anyone knows how to do it, I'm all ears. 

Thank you for your reply.

So...I can use my second way.But throwProps cant use if I use another div move with content div.

Do you have any suggest about this solution?

Thank you again~ ^_^

Link to comment
Share on other sites

I'm not sure I understand your question, but if you're trying to call a function each time the ThrowProps tween updates, you can simply add this to your Draggable vars:

Draggable.create(... {
    ...
    onThrowUpdate:function() {
       $("#textArea").css({"top":this.y,"left":this.x});
    }
});

The onThrowUpdate gets called every time the tween updates. 

 

I'd recommend caching the $("#textArea") instance, of course, to optimize performance. 

 

Does that help?

Link to comment
Share on other sites

I'm not sure I understand your question, but if you're trying to call a function each time the ThrowProps tween updates, you can simply add this to your Draggable vars:

Draggable.create(... {
    ...
    onThrowUpdate:function() {
       $("#textArea").css({"top":this.y,"left":this.x});
    }
});

The onThrowUpdate gets called every time the tween updates. 

 

I'd recommend caching the $("#textArea") instance, of course, to optimize performance. 

 

Does that help?

  :o That's it! Thank you very very much!

And sorry about my english.

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.
×