Replacing Dropped Elements

[phfilly]

Hi guys,

Was wondering if you could help me please.

So I have a list of menu elements from which I can drag elements into a div tag. This all works fine. But I'm struggling to replace the elements with each other. So say for instance I already have an img in that one div tag and I want to replace that img with another. At the moment it only appends it instead of swapping the two.

I've tried various methods but can't seem to get it...

Below follows the drop() function :

//DraggedImageData is just the HTML of an image

function drop(ev){
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text/html", ev.target.id);  //div to drop id    

                if(DraggedElement == ev.target.id)
                {
                    if(ev.target.hasChildNodes())
                    {
                        //this is where i don't know what to add 
                    }
                    else{
                        $(ev.target).append(DraggedImageData);  
                    }       

                }
        }

I've tried document.getElementById(ev.target.id).replaceWidth(DraggedImageData); but didnt work.

Any help will be appreciated!

[gabrielcastillo]

Here is a good tutorial, for an alternative solution. Here

[phfilly]

Thanks I'll look into that.