Jump to content
GreenSock

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

dragging brings symbol to top?

Go to solution Solved by Jonathan,

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 started playing with edge animate last week and was using jquery-ui for my drag and drop. I then learned that there was a known bug that made it act like crap in responsive layouts. A coworker to me about greensock so I tried it out and it works good. 

 

The only issue I have run into is it seems to effect it's z-index. I have the create statement on creation complete w/ it set to disable. I also have 2 buttons that when pressed enable/disable the draggable. The dragged object becomes the top div and can cover the buttons used to toggle it.

 

Looking online I found people trying to force it to the top but no one trying to make it stay put. is this a known issue? Sorry if this is a dumb question, I am teaching myself 2 new softwares.

 

this is how I am calling it:

 

function init(){

  var Protractor = Draggable.create(document.getElementById("Stage_MilProtractor"));

  Protractor[0].disable();

 

  sym.$("move").click(function(){

    Protractor[0].enable();

  });

 

 

sym.$("write").click(function(){

    Protractor[0].disable();

  });

}

Link to comment
Share on other sites

  • Solution

Hello RyanP, and welcome to the GreenSock Forum!

 

Try adding zIndexBoost: false ... since default is true

 

See Draggable Docs:

 

zIndexBoost : Boolean - by default, for vertical/horizontal dragging, when an element is pressed/touched, it has its zIndex set to a high value (1000 by default) and that number gets incremented and applied to each new element that gets pressed/touched so that the stacking order looks correct (newly pressed objects rise to the top), but if you prefer to skip this behavior set zIndexBoost:false.

function init(){
  // add zIndexBoost false
  var Protractor = Draggable.create(document.getElementById("Stage_MilProtractor"),{zIndexBoost:false});
  
  Protractor[0].disable();

  sym.$("move").click(function(){
    Protractor[0].enable();
  });

  sym.$("write").click(function(){
    Protractor[0].disable();
  });
}

Does that help? :)

  • Like 2
Link to comment
Share on other sites

That worked perfect.

 

Had the docs open too but didn't realize the navigation on the left was sub functions. That makes thing easier now that I know that.

 

Thanks.

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

×