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? --~--~---------~--~----~------------~-------~--~----~ 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 prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---