Jump to content
Search Community

Draggable (scrollTop) inside a draggable item (x,y)

mimeartist 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,

 

I'm absolutely loving your work... it's really making things so much simpler for me...

 

However I've got an issue... I've got  a group of panels that you can drag around... however one of them has text in it that can be scrolled, ... it works fine with the mouse wheel, but when you drag the text it both scrolls the text and the panel... is there a simple and correct way to stop propagation.

 

I don't want to start to try and hack work arounds if possible as the GSAP stuff makes my code nice and clean...

 

<script>

#slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; }
 
#slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; }
</script>

 

<div id='slide5' class='panel'><div id='slideScrollText'>Imageine lots of text here</div></div>
 
<script>
     Draggable.create(".panel", {type:"x,y", throwProps:true, bounds:'#siteContainer' });
     Draggable.create("#slideScrollText", {type:"scrollTop"});
</script>
 
Link to comment
Share on other sites

Hello,

 

i noticed in the code your provided above, that you have your CSS rules in a script tag. It should be in a style tag:

<style type="text/css">
#slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; }
 
#slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; }
</style>

if your DOCTYPE is for HTML5, then you omit the type attribute:

<style>
#slide5 { position:absolute; left:500px; top:100px; width:450px; height:400px; background-color:#49F7FA; }
 
#slideScrollText { position:absolute; width:300px; height:330px; left:130px; top:70px; overflow:auto; border:0px solid #ff0000; z-index:1000; color:#666666; font-size:13px; padding-right:20px; }
</style>

other than that, can you please provide your example in a

See the Pen by pen (@pen) on CodePen

or jsfiddle. This way we can help you in a live code environment..  since i kind of understand what your issue is, but  a limited example will be very helpful ! :D

Link to comment
Share on other sites

Hi,

 

What you could do is store the draggable instances in variables and then call the diable() method using the onDragStart callback in the scroll drag, then using th onDragEnd callback in the scroll drag, call the enable() method:

var drag1 = Draggable.create(".panel", {type:"x,y" });
var drag2 = Draggable.create("#slideScrollText", 
  {
    type:"scrollTop",
    onDragStart:function()
    {
     drag1[0].disable();
    },
    onDragEnd:function()
    {
      drag1[0].enable();
    }
  });

Take a look at the docs to find out more about the great capacities of Draggable:

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hmm... that doesn't want to work... I think it's because drag2 inside drag1, so probably drag1 is having an impact of drag2.... Will have a look at that doc file though... an I'll definitely find use for the disable part for some other parts of my project... thanks!

Link to comment
Share on other sites

Ah yes, you're right... thanks very much...

 

Just looking at my code... and I have a number of panels, so the drag1[0] obviously relates to which one that has that class.. so I just need to work out how to get the right index...

 

Brilliant... thanks Rhernando!

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