Drag and Drop problems

[Mike]

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?

[david]

Hi Mike,

for the first question, I think that you should style the inserted
element or use a SPAN tagb instead of a DIV tag:
the DIV expand its width by default to it's contener width,
the SPAN just enclose inside content.

for the second question, there is no siimple way, scriptaculous don't
handle that, but I remember that some projects have modify default
scriptaculous behaviour ==> Have a look at http://scripteka.com/

--
david

[Alex McAuley]

For the second question you have to work out its positioning on the page and
relative to its parent... enclosing is not easy but its also not difficult
...

Here is some code i wrote to enclose draggable windows in my windowing
system to make sure they dont go outsode the page...

http://pastie.org/529198

HTH

Alex

[Rick Waldron]

Alex,

Thats super rad.

Rick

[Mike]

Thank you all for the fast responses. That really helps my project
along :)

> > scriptaculous behaviour ==> Have a look athttp://scripteka.com/

[Alex McAuley]

Seriously ? ... lol

 

It needs everything to be in a "container" div with width and height set to the viewport but it works perfectly .... i wrote one for resizzables too to stop someone resizing something outside of a given container!.

[Mike]

Alright, I am having some new troubles. I changed the elements to
SPAN's, but now when a new element appears, the previous elements
become un-draggable. Why is this happening?

On Jun 30, 11:14 am, "Alex McAuley" <webmas...@thecarmarketplace.com>
wrote:

> Seriously ? ... lol
>
> It needs everything to be in a "container" div with width and height set to the viewport but it works perfectly .... i wrote one for resizzables too to stop someone resizing something outside of a given container!.
>
>
>
>   ----- Original Message -----
>   From: Rick Waldron
>   To: prototype-s...@googlegroups.com
>   Sent: Tuesday, June 30, 2009 5:10 PM
>   Subject: [Proto-Scripty] Re: Drag and Drop problems
>
>   Alex,
>
>   Thats super rad.
>
>   Rick
>

>   On Tue, Jun 30, 2009 at 7:16 AM, Alex McAuley <webmas...@thecarmarketplace.com> wrote:
>
>     For the second question you have to work out its positioning on the page and
>     relative to its parent... enclosing is not easy but its also not difficult
>     ...
>
>     Here is some code i wrote to enclose draggable windows in my windowing
>     system to make sure they dont go outsode the page...
>
>    http://pastie.org/529198
>
>     HTH
>
>     Alex
>
>     ----- Original Message -----
>     From: "david" <david.brill...@gmail.com>
>     To: "Prototype & script.aculo.us" <prototype-s...@googlegroups.com>
>     Sent: Tuesday, June 30, 2009 11:29 AM
>     Subject: [Proto-Scripty] Re: Drag and Drop problems
>
>     Hi Mike,
>
>     for the first question, I think that you should style the inserted
>     element or use a SPAN tagb instead of a DIV tag:
>     the DIV expand its width by default to it's contener width,
>     the SPAN just enclose inside content.
>
>     for the second question, there is no siimple way, scriptaculous don't
>     handle that, but I remember that some projects have modify default

>     scriptaculous behaviour ==> Have a look athttp://scripteka.com/