I am making a drag-and-drop editor thing using scriptaculous. However,
when I dynamically add an element, it takes the size of the div it is
being placed into. Then, when I drag it, I don't have access to any
other elements that are already in the div.

Here is the javascript functions I created:

               function createCanvas(){
                        Droppables.add('sigImage', {
                                accept: 'draggable',
                                hoverclass: 'hover'
                function createNewDraggable(elementId){
                        new Draggable(elementId, {
                                handle: 'sigImage',
                                ghosting: true
                function newElementMenu(){
                        document.getElementById('newElementName').value = '';
                        Effect.Appear('createNewElementMenu', {duration: .3});
                function newElement(elementName){
                        Effect.Fade('createNewElementMenu', {duration: .3});
                        document.getElementById('sigImage').innerHTML += '<div 
id="' +
elementName + '">The next element!</div>';

Here is the nesting:

                <div id="sigImage" style="width: 500px; height: 100px;
background-color: gray; color: black; border: 1px black; overflow:
                        <div id="dragme">Drag me!</div>

Another not so important thing is how can I get the elements to remain
in the div and not be dragged outside of it?

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to