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

----- Original Message -----
From: "david" <david.brill...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-scriptaculous@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 at http://scripteka.com/

--
david

On 30 juin, 07:58, Mike <thej...@gmail.com> wrote:
> 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?

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-scriptaculous@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 at http://scripteka.com/

> --
> david

> On 30 juin, 07:58, Mike <thej...@gmail.com> wrote:
> > 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?

> 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-scriptaculous@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/

> > --
> > david

> > On 30 juin, 07:58, Mike <thej...@gmail.com> wrote:
> > > 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?

  ----- Original Message -----
  From: Rick Waldron
  To: prototype-scriptaculous@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-scriptaculous@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 at http://scripteka.com/

    --
    david

    On 30 juin, 07:58, Mike <thej...@gmail.com> wrote:
    > 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?

> 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-scriptaculous@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-scriptaculous@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/

>     --
>     david

>     On 30 juin, 07:58, Mike <thej...@gmail.com> wrote:
>     > 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?