Draggable || Throwprops - enable draggable on x axis as well as native y scrolling

[styke]

Title says it all really. Is it possible to init  draggable/throwprops on an element which draggable modifies along the x axis, but doesn't activate when it is scrolled natively on the y? 

[Jonathan]

Hello styke..

 

Do you mean restrict the dragging to only the x-axis?

 

If so.. here is an example that restricts the draggabe to only moving in x:

 

See the Pen vfEFB by jonathan (@jonathan) on CodePen

 

Taken from Draggable docs:

 

type: String -

indicates the type of dragging (the properties that the dragging should affect). Any of the following work:

• "x,y" (basically the translateX and translateY of transform)
• "top,left"
• "rotation"
• "scroll"
• "x"
• "y"
• "top"
• "left"
• "scrollTop"
• "scrollLeft"
• The default is "x,y" for all browsers except old versions of IE that don't natively support transforms in which case "top,left" is the default.

A limited codepen example of your code would be a great help, if this doesn't answer your question?

 

[Rodrigo]

Hi,

 

I'd echo Jonathan's suggestion of a reduced codepen sample.

 

I'm not sure if you mean a Draggable instance that affects the X axis and another Draggable instance that affects scroll top, or the same Draggable instance that affects both properties (this would be a tricky one but defining a trigger area perhaps it'd be done).

 

If you refer to a Draggable instance that affects the X axis that can't be used when the element is being scrolled with the scroll bar or mouse wheel, what you could try is disable/enable the Draggable instance based on the scroll event. This snippet changes a boolean every time the user scrolls the page and 10 milliseconds after the scroll ended it changes it back:

var scrollBool = false;

$(window).scroll(function()
{
  scrollBool = true;
  
  TweenLite.delayedCall(0.01, function()
  {
    scrollBool = false;
  });
});

Instead of changing a boolean you can disable/enable the Draggable instance.

 

Rodrigo.