Having styling issues with DD Delegate + Animation

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 7 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Nate DAmico

Username: kaiyzen
Joined: Fri Nov 27, 2009 3:44 pm
Posts: 40

Tags:

Having styling issues with DD Delegate + Animation

Posted: Fri Sep 03, 2010 1:56 pm

+0-

I am experiencing what appears to be styling issues with my Drag Delegate implementation,

I have something setup like this:

-----------------------------------------------------------------------------------------------
<div id="slider_container" style="overflow: hidden;">
<div id="sliding_panel">
<div id="item1" class="item"></div>
<div id="item2" class="item"></div>
<div id="item3" class="item"></div>
<div id="itemN" class="item"></div>
</div>
</div>
<div id="main_body">
</div>
-----------------------------------------------------------------------------------------------

The sliding_panel element gets rendered/populated with elements from some search results. Once its done I make it an animated element that can slide left and right in order to scroll through all available items

I then create a drag delegate with the sliding_panel as the container and all the div.item elements draggable via the delegate, and add the main_body as the drop target.

Issue I am running into is that everything works fine as long as you have performed a scroll left/right. Once you do, the positioning on the slider_panel goes to relative, and the drag objects get stuck inside the slider_panel and fall under the overflow hidden rule from the slide_container object

As anyone worked with this type of pattern before, and worked their way out of the styling issue?

Dav Glass

Username: davglass
Joined: Thu Aug 28, 2008 9:28 am
Posts: 2088
Location: Marion, IL, US
Twitter: davglass
GitHub: davglass
Gists: davglass
IRC: davglass

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Tue Sep 07, 2010 6:43 am

+0-

What you actually need to do is use DDProxy plugin, the issue is that your "sticking" your items inside the parent because of the "overflow". If you use the DDProxy plugin, the draggable element is actually "outside" the parent, so it will not be "stuck" inside the scrolled area.

Make sense?

Nate DAmico

Username: kaiyzen
Joined: Fri Nov 27, 2009 3:44 pm
Posts: 40

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Tue Sep 07, 2010 9:46 am

+0-

Sorry for not providing more details.., I am using proxy.., here is the top of my code that is setting things up:

---------------------------------------

YUI().use('dd-delegate', 'dd-proxy', 'dd-drop','dd-drop-plugin','node', function(Y){
var compDDel = new Y.DD.Delegate({
cont: '#slide_bar',
nodes: 'div.component',
dragMode: 'intersect'
});

compDDel.dd.plug(Y.Plugin.DDProxy, {
moveOnEnd: false,
cloneNode: true
});

-----------------------------------

The #slide_bar element is the same one that the animation is attached to

Nate DAmico

Username: kaiyzen
Joined: Fri Nov 27, 2009 3:44 pm
Posts: 40

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Thu Sep 09, 2010 8:00 am

+0-

Did some more testing playing around with various positioning of the parent element(s) and overflow. It all seems to come down to the relative positioning that is on the sliding/animated element.

If I animate, then turn off the relative positioning, the drag behaves normal again until animating again,

Tried to use shim to see if it would drop its overlay + proxy use would defeat the hidden overflow but no luck,

Will be testing some on the styling side, going to try and setup a basic stripped down reproduction of the overflow to try and reproduce

Nate DAmico

Username: kaiyzen
Joined: Fri Nov 27, 2009 3:44 pm
Posts: 40

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Thu Sep 09, 2010 11:09 pm

+0-

Couple more tests, came up with a minimal one, sans animation, but still with overflow,

http://kaiyzen.com/testyui/ddoverflow.php

Still getting issue where overflow hides the drag object.., but the drop still registers fine,

If the "slide_bar" element is positioned in absolute manner.., which breaks the overflow, the drag behaves as expected.., else it gets hidden,

Any thoughts on styling issue workarounds to accomplish this pattern?

Nate DAmico

Username: kaiyzen
Joined: Fri Nov 27, 2009 3:44 pm
Posts: 40

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Fri Sep 24, 2010 11:13 am

+0-

Finally got some more time to debug why my proxy drag delegate item is getting trapped inside due to overflow: hidden style on its parents parent,

Turns out the issue was due to the cloneNode: true property I was setting in the proxy plug params,

It was prepending the shim and proxy drag elements correctly to the <body> element, but when implementing cloneNode: true it clones the node and appends the drag element to the drag targets parent, and doesnt clone its contents into the drag proxy element at the top of the body. Once the drag is initiated it uses the cloned object and not the proxy one,

A workaround for me was to wrap my drag targets in another div, use that wrapper as the drag target do the clone myself in the drag:start event:

-----------------
var drag = this.get('dragNode'), target = this.get('currentNode');
drag.set('innerHTML',target.get('innerHTML'));
drag.setAttribute('class', target.getAttribute('class'));
------------------

Where dragNode ends up being the proxy element, and currentNode is the node you are targeting to drag,

Also make sure if you want the clone style to also add the borderStyle:false param else you will get double borders depending on your target element styling

Not entirely sure but in digging through the proxy.js file appears that the clone function inside is the culprit where it clones the element and appends to the parent instead of utilizing the proxy element created at the top of <body> on instantiation

clone: function() {
var host = this.get(HOST),
n = host.get(NODE),
c = n.cloneNode(true);

delete c._yuid;
c.setAttribute('id', Y.guid());
c.setStyle('position', 'absolute');
n.get('parentNode').appendChild(c);
host.set(DRAG_NODE, c);
return c;
}

Dav Glass

Username: davglass
Joined: Thu Aug 28, 2008 9:28 am
Posts: 2088
Location: Marion, IL, US
Twitter: davglass
GitHub: davglass
Gists: davglass
IRC: davglass

Tags:

Re: Having styling issues with DD Delegate + Animation

Posted: Fri Sep 24, 2010 11:18 am

+0-

The clone method intentionally doesn't move the clone out of the dom tree. There are tons of issues with people creating a proxy/clone that has cascaded style associated with it. This fixes that use case (which is the most popular use case).

What you are doing, is the correct thing to do in this situation.

Page 1 of 1

[ 7 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum