Forums

Using YUI v2.8.0r4 and Firefox v3.5 (on a Linux RedHat Fedora 8 system).

I've successfully managed to get the drag and drop example
(http://developer.yahoo.com/yui/examples ... order.html)
working in my setup.

The problem comes in when the list item has a <div> or <span> element
within it that I want to change the visibility on. Simplified example:

...
<li class="list1" id="li0_0">
<table>
<tr>
<td valign="top">
<a onclick="toggleContainer('extra'); return false;" href="#">
<img src="/images/expand.jpg" />
</a>
<strong>Put Label Here:</strong>
</td>

<td>
Put Value Here

<div id="extra" style="display: none;">
<p>Expand/Collapse section</p>
</div>
</td>
</tr>
</table>
</li>
...

There is an image that I can click on that calls toggleContainer().
This function toggles the display style of the "extra" div section.

Once this list item is dragged, changing the display style has no effect
(before dragging, it works as expected). Doesn't matter if the item is
dragged to the other box, moved within the same box, or just dragged to
nowhere so that it snaps back into place. Once dragged, changing
display style has absolutely no effect. I get no JavaScript errors,
just nothing happens. Even line stepped using Firebox to make sure
toggleContainer() is setting the correct value (div.style.display = ...)
and that's fine.

Is <table> screwing things up? I would appreciate any suggestions on
how to get around this or other things to try to help figure out the
problem.

I made the simplest example I could think of that doesn't work. I took the YUI drag-n-drop example and added a div to one item and a span to another to show that both suffer the same problem. You can find it here.

Item list 1, item 2 has the span element. Item list1, item 3 has the div. Click on the [X] to toggle.

The span and div elements toggle visible and not visible. Now, drag one to either the other box, to the same box, or to nowhere valid so that is snaps back. Try clicking the [X] again. Doesn't work. Still works for the one not moved.

Yes, that makes sense. I don't suppose there's an easy way to deal with
this situation?

On Tue, 2010-03-09 at 21:41 +0000, YUI Forum (for davglass) wrote:
> Ok, here's the issue.
>
> On drag start, the code is adding the content of the LI to the proxy
> element (to give the illusion that it's moving), but your LI's have
> elements with ID attributes. This leads to having 2 elements on the
> page with the same ID, since it was copied from the LI to the Proxy.
>
> You can tell this by dragging an item with an X, then trying to open
> it. It won't open, now drag one without the X & go back and click the
> X on the first one. It will work, since the proxy element now has
> different content.
>
> Make sense?
>
> Visit Topic:
> http://yuilibrary.com/forum/viewtopic.php?f=89&t=2964&p=10085#p10085
>
> -----------------------------------------------------------------
> Do not reply to this email. It is a one-way only email address.
> All messages sent to this address will be ignored.
--
Adam Stein @ Xerox Corporation Email: adam@eng.mc.xerox.com

Disclaimer: Any/All views expressed
here have been proven to be my own. [http://www.csh.rit.edu/~adam/]

Removed all the child nodes from the proxy when the drop was done and
that seemed to do the trick. Thanks for the info.

On Wed, 2010-03-10 at 14:27 +0000, YUI Forum (for davglass) wrote:
> You could clear the proxy on drop or you could be extra careful on
> what you put into the proxy in the first place. Either way should fix
> the issue.
>
> Visit Topic:
> http://yuilibrary.com/forum/viewtopic.php?f=89&t=2964&p=10111#p10111
>
> -----------------------------------------------------------------
> Do not reply to this email. It is a one-way only email address.
> All messages sent to this address will be ignored.
--
Adam Stein @ Xerox Corporation Email: adam@eng.mc.xerox.com

Disclaimer: Any/All views expressed
here have been proven to be my own. [http://www.csh.rit.edu/~adam/]

Finally, Adam replied me in mail for the solution


endDrag: function(e) {
var srcEl = this.getEl();
var proxy = this.getDragEl();

// Show the proxy element and animate it to the
// src element's location
Dom.setStyle(proxy, "visibility", "");

var a = new YAHOO.util.Motion(
proxy, {
points: {
to: Dom.getXY(srcEl)
}
},
0.2,
YAHOO.util.Easing.easeOut
)

var proxyid = proxy.id;
var thisid = this.id;

// Hide and remove all elements in the proxy and show the source
// element when finished with the animation
a.onComplete.subscribe(function() {
Dom.setStyle(proxyid, "visibility", "hidden");

// Remove what's in the proxy DIV, otherwise we
// end up with more than one element with the same
// ID (proxy is a copy) which causes anything
// referencing the ID to fail
var last_index = proxy.childNodes.length - 1;
for(var index = last_index;index > -1;--index) {
proxy.removeChild(proxy.childNodes[index]);
}

Dom.setStyle(thisid, "visibility", "");
});

a.animate();
},

Thank You Adam