Jump to content
Search Community

dragging brings symbol to top?

RyanP test
Moderator Tag

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

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