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
-~----------~----~----~----~------~----~------~--~---
