[Tween after dragging...]

I've got a DIV that is draggable... lets calls it projectBoard1

 

when I drag it, and then try and revert it's position e.g.

 

TweenMax.to('#projectBoard1', projectSpeed, { top: 0, left:15 });

 

it doesn't tween, and the only way I can think of doing it is by using CSS

 

$('#projectBoard1').css({top:0, left:15});

 

Is there something to do with once it's been dragged? or possibly some bounds or something?

 

Sorry I've not been able to post any code, it's a big project, and just wondered if someone had an idea offhand what I should be looking at... thank you

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

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!

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

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!

[Which files should I link to...]

I'm linking to all the files for what I assume I need... as below...

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenLite.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/easing/EasePack.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/jquery.gsap.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/CSSPlugin.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/utils/Draggable.min.js"></script>

<script src="js/ThrowPropsPlugin.min.js"></script>

 

Note: You'll see I'm using the throwProps on my server, as it's important I get the inertia for dragging items... am I doing this correctly as the inertia isn't working like the demos... thought I'd check I'm using all th right components first before hacking the code... Is throw props actually included in draggable.min.js etc?

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

Oops... Sorry... not used code pen before so tried to use another one... I'm not using cats!

 

See the Pen zxEco by anon (@anon) on CodePen

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

You'll see if you try and drag the text up and down... it triggers the panel too

 

See the Pen rxvJz by anon (@anon) on CodePen

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

Ah yes, I was trying to cut and paste it in to show what I was doing... thanks... will do the codepen now

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

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>