[Javascript] Changing an Objects ID and Name

[Terry Riegel]

Paul, if you have a look at my example page I can explain from that.

http://clearimageonline.com/pages/start/projects/draganddrop/album.html

On this page you can drag around images and if they are not on a drop  
zone they will snap back, if they are on a drop zone they will zoom  
down to it. Also if you click outside an image it will deselect all  
images. What I am trying to accomplish is to allow a user (when  
dragging 1 image) to drop it and it will get inserted into the spot  
and all the other images will ripple to give it room. For every image  
on the page there is the original image and a cloned image (via  
Walter Zorn's drag and drop script). I can swap the cloned images  
using the methods provided by Walter Zorn.

I have implemented the function presented by Jonathan Buckman (Thanks  
Jonathan) to simply swap out the objects. So I am able to swap images  
around. I have the image swap working, I expect to have the final  
drop/ripple working later tomorrow. I was able to get a lot working  
today.

I modified it slightly to include the type of node being swapped.

function swapNodes(n1, n2, k)
{
    var placeHolder = document.createElement(k);
    n1.parentNode.replaceChild(placeHolder, n1);
    n2.parentNode.replaceChild(n1, n2);
    placeHolder.parentNode.replaceChild(n2, placeHolder);
}

Is there some type of cleanup needed to remove the temporary node  
(placeHolder)? Or is it local to the function and gets removed  
automatically?



On Sep 6, 2006, at 11:21 AM, Paul Novitski wrote:

> At 9/6/2006 05:56 AM, Terry Riegel wrote:
>> I would like to swap out an image in an application I am writing.
>> Basically I want to swap two image tags, the trick is I want to swap
>> their ID and NAME tags also.
> ...
>> The important thing Is I would like to swap all of the attributes
>> out. i.e. width,height,id,name,src
>
>
> Terry,
>
> What hurdles have you encountered doing exactly what you're wanting  
> to do?  Like others on this list, I'm curious to know if there are
> other solutions to whatever your problem might be, but I don't see  
> why you can't simply do what you want.  Attributes including id are  
> read/write.  Swapping them is not difficult.  Once you've pointed  
> to an object, e.g.
>
>         var oObj1 = document.getElementById(sId1);
>
> you can change all of its attributes, including id.
>
> Some attributes such as id have named nodes in the DOM:
>
>         sSwapAttribute = oObj1.id;
>         oObj1.id = oObj2.id;
>         oObj2.id = sSwapAttribute;
>
> http://developer.mozilla.org/en/docs/DOM:element.id
>
> Others need to be access using getAttribute() & setAttribute():
>
>         sSwapAttribute = oObj1.getAttribute("foo");
>         oObj1.setAttribute("foo", oObj2.getAttribute("foo"));
>         oObj2.setAttribute("foo", sSwapAttribute);
>
> http://developer.mozilla.org/en/docs/DOM:element.getAttribute
> http://developer.mozilla.org/en/docs/DOM:element.setAttribute
>
> You can also make good use of attributes() which returns an array  
> of all attributes of the specified element.
> http://developer.mozilla.org/en/docs/DOM:element.attributes
>
> However, this seems like a lot of logic to accomplish a simpler  
> task, to swap the actual nodes in the DOM, as Jonathan points out.
>
> Philosophically, one wonders: if you swap all the attributes of two  
> elements, what's left to distinguish them?  Their placement in the  
> HTML markup.  Their placement is significant because it determines  
> their sequence in the markup structure and because it can affect  
> their visual placement on the page.  I would say that in the  
> majority of cases one can swap two elements in the visual layout  
> using CSS.  If this presentational swapping is your goal, there are  
> alternative methods you might consider (such as simply swapping  
> their classNames).
>
> Regards,
> Paul
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript