> 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>';
>                         createNewDraggable(elementName);
>                 }

> Here is the nesting:

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