Using the code below (with prototype v1.5.0 and scriptaculous v1.7.0)
- when I drag one of the draggables onto a droppable, it stops being a
draggable.
I don''t want that. I want it to remain draggable until I say so.
Am I failing to understand something fundamental, or is this a simple
fix to my code?
<div id="d1" class="draggables">
<span class="draghandle">drag me</span>
<br/>I am draggable
</div>
<div id="d2" class="draggables">
<span class="draghandle">drag me too</span>
<br/>I am draggable
</div>
<div id="drop1" class="droppables"
style="float:left;"></div>
<div id="drop2" class="droppables"
style="float:right;"></div>
<br style="clear:both;"/>
<div id="dropstatus" ></div>
<script type="text/javascript">
new Draggable(''d1'',{handle:''draghandle'',
snap:[10,10]});
new Draggable(''d2'',{handle:''draghandle'',
snap:[10,10]});
Droppables.add(''drop1'', {
onDrop: function(element){
$(''dropstatus'').innerHTML = ''Dropped '' +
element.id + '' on drop1.'';
}
});
Droppables.add(''drop2'', {
onDrop: function(element){
$(''dropstatus'').innerHTML = ''Dropped '' +
element.id + '' on drop2.'';
}
});
</script>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Because the Droppable has a higher z-index.
It''s not that the Draggable isn''t draggable anymore,
it''s that the
click event is going to the Droppable (which is on "top"), and no
further.
Add the following CSS, and try it again:
.draggables {
border: 1px solid green;
z-index: 10;
}
.droppables{
padding: 3em;
border: 2px solid red;
z-index: 1;
}
(I think you''ll also find your draggables are bigger than you may
have intended.)
TAG
On Apr 12, 2007, at 5:59 AM, ben wrote:
>
> Using the code below (with prototype v1.5.0 and scriptaculous v1.7.0)
> - when I drag one of the draggables onto a droppable, it stops being a
> draggable.
>
> I don''t want that. I want it to remain draggable until I say so.
>
> Am I failing to understand something fundamental, or is this a simple
> fix to my code?
>
> <div id="d1" class="draggables">
> <span class="draghandle">drag me</span>
> <br/>I am draggable
> </div>
>
> <div id="d2" class="draggables">
> <span class="draghandle">drag me too</span>
> <br/>I am draggable
> </div>
>
> <div id="drop1" class="droppables"
style="float:left;"></div>
> <div id="drop2" class="droppables"
style="float:right;"></div>
> <br style="clear:both;"/>
>
> <div id="dropstatus" ></div>
>
> <script type="text/javascript">
>
> new
Draggable(''d1'',{handle:''draghandle'',
snap:[10,10]});
> new
Draggable(''d2'',{handle:''draghandle'',
snap:[10,10]});
>
> Droppables.add(''drop1'', {
> onDrop: function(element){
> $(''dropstatus'').innerHTML = ''Dropped
'' + element.id + '' on drop1.'';
> }
> });
> Droppables.add(''drop2'', {
> onDrop: function(element){
> $(''dropstatus'').innerHTML = ''Dropped
'' + element.id + '' on drop2.'';
> }
> });
> </script>
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
That fixed it. Thank you very much :) On Apr 12, 4:36 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> Because the Droppable has a higher z-index. > > It''s not that the Draggable isn''t draggable anymore, it''s that the > click event is going to the Droppable (which is on "top"), and no > further. > > Add the following CSS, and try it again: > > .draggables { > border: 1px solid green; > z-index: 10; > > } > > .droppables{ > padding: 3em; > border: 2px solid red; > z-index: 1; > > } > > (I think you''ll also find your draggables are bigger than you may > have intended.) > > TAG > > On Apr 12, 2007, at 5:59 AM, ben wrote: > > > > > Using the code below (with prototype v1.5.0 and scriptaculous v1.7.0) > > - when I drag one of the draggables onto a droppable, it stops being a > > draggable. > > > I don''t want that. I want it to remain draggable until I say so. > > > Am I failing to understand something fundamental, or is this a simple > > fix to my code? > > > <div id="d1" class="draggables"> > > <span class="draghandle">drag me</span> > > <br/>I am draggable > > </div> > > > <div id="d2" class="draggables"> > > <span class="draghandle">drag me too</span> > > <br/>I am draggable > > </div> > > > <div id="drop1" class="droppables" style="float:left;"></div> > > <div id="drop2" class="droppables" style="float:right;"></div> > > <br style="clear:both;"/> > > > <div id="dropstatus" ></div> > > > <script type="text/javascript"> > > > new Draggable(''d1'',{handle:''draghandle'', snap:[10,10]}); > > new Draggable(''d2'',{handle:''draghandle'', snap:[10,10]}); > > > Droppables.add(''drop1'', { > > onDrop: function(element){ > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop1.''; > > } > > }); > > Droppables.add(''drop2'', { > > onDrop: function(element){ > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop2.''; > > } > > }); > > </script>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Actually, it''s not. Well... it''s a slightly different problem but the cause seems to be related. I''m writing one bunch of draggable divs as children of the page container div. This also contains two child droppable divs (call them "A" and "B"). See code in original post I''m also now writing a bunch of draggable divs inside droppable "A" When I drag the draggables that are simply children of the page container onto droppable A or B, they behave as expected. When I drag draggables that are children of droppable "A" onto droppable "B", the onDrop of "B" is fired, but the draggable goes UNDERNEATH the drobbable. This is on FF 2.0.0.3 (WinXP) I''ve set z-index on all draggables and droppables. In <style> and inline. Nothing fixes it. Clearly, I''ve failed to grasp something. Can anyone enlighten me? Thanks :) On Apr 13, 9:51 am, "ben" <ben.r.ca...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> That fixed it. Thank you very much :) > > On Apr 12, 4:36 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote: > > > Because the Droppable has a higher z-index. > > > It''s not that the Draggable isn''t draggable anymore, it''s that the > > click event is going to the Droppable (which is on "top"), and no > > further. > > > Add the following CSS, and try it again: > > > .draggables { > > border: 1px solid green; > > z-index: 10; > > > } > > > .droppables{ > > padding: 3em; > > border: 2px solid red; > > z-index: 1; > > > } > > > (I think you''ll also find your draggables are bigger than you may > > have intended.) > > > TAG > > > On Apr 12, 2007, at 5:59 AM, ben wrote: > > > > Using the code below (with prototype v1.5.0 and scriptaculous v1.7.0) > > > - when I drag one of the draggables onto a droppable, it stops being a > > > draggable. > > > > I don''t want that. I want it to remain draggable until I say so. > > > > Am I failing to understand something fundamental, or is this a simple > > > fix to my code? > > > > <div id="d1" class="draggables"> > > > <span class="draghandle">drag me</span> > > > <br/>I am draggable > > > </div> > > > > <div id="d2" class="draggables"> > > > <span class="draghandle">drag me too</span> > > > <br/>I am draggable > > > </div> > > > > <div id="drop1" class="droppables" style="float:left;"></div> > > > <div id="drop2" class="droppables" style="float:right;"></div> > > > <br style="clear:both;"/> > > > > <div id="dropstatus" ></div> > > > > <script type="text/javascript"> > > > > new Draggable(''d1'',{handle:''draghandle'', snap:[10,10]}); > > > new Draggable(''d2'',{handle:''draghandle'', snap:[10,10]}); > > > > Droppables.add(''drop1'', { > > > onDrop: function(element){ > > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop1.''; > > > } > > > }); > > > Droppables.add(''drop2'', { > > > onDrop: function(element){ > > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop2.''; > > > } > > > }); > > > </script>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Sorry, my bad. A little experimentation with different z-indexes helped. I had to use the droppable onHover event to set the z-index, and I had to remember that it''s not "style.zindex", but "style.zIndex". If there is anyone out there as daft as me, I hope this info is of some use. On Apr 13, 3:37 pm, "ben" <ben.r.ca...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> Actually, it''s not. Well... it''s a slightly different problem but the > cause seems to be related. > > I''m writing one bunch of draggable divs as children of the page > container div. This also contains two child droppable divs (call them > "A" and "B"). See code in original post > > I''m also now writing a bunch of draggable divs inside droppable "A" > > When I drag the draggables that are simply children of the page > container onto droppable A or B, they behave as expected. > > When I drag draggables that are children of droppable "A" onto > droppable "B", the onDrop of "B" is fired, but the draggable goes > UNDERNEATH the drobbable. This is on FF 2.0.0.3 (WinXP) > > I''ve set z-index on all draggables and droppables. In <style> and > inline. Nothing fixes it. > > Clearly, I''ve failed to grasp something. Can anyone enlighten me? > > Thanks :) > > On Apr 13, 9:51 am, "ben" <ben.r.ca...-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote: > > > That fixed it. Thank you very much :) > > > On Apr 12, 4:36 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote: > > > > Because the Droppable has a higher z-index. > > > > It''s not that the Draggable isn''t draggable anymore, it''s that the > > > click event is going to the Droppable (which is on "top"), and no > > > further. > > > > Add the following CSS, and try it again: > > > > .draggables { > > > border: 1px solid green; > > > z-index: 10; > > > > } > > > > .droppables{ > > > padding: 3em; > > > border: 2px solid red; > > > z-index: 1; > > > > } > > > > (I think you''ll also find your draggables are bigger than you may > > > have intended.) > > > > TAG > > > > On Apr 12, 2007, at 5:59 AM, ben wrote: > > > > > Using the code below (with prototype v1.5.0 and scriptaculous v1.7.0) > > > > - when I drag one of the draggables onto a droppable, it stops being a > > > > draggable. > > > > > I don''t want that. I want it to remain draggable until I say so. > > > > > Am I failing to understand something fundamental, or is this a simple > > > > fix to my code? > > > > > <div id="d1" class="draggables"> > > > > <span class="draghandle">drag me</span> > > > > <br/>I am draggable > > > > </div> > > > > > <div id="d2" class="draggables"> > > > > <span class="draghandle">drag me too</span> > > > > <br/>I am draggable > > > > </div> > > > > > <div id="drop1" class="droppables" style="float:left;"></div> > > > > <div id="drop2" class="droppables" style="float:right;"></div> > > > > <br style="clear:both;"/> > > > > > <div id="dropstatus" ></div> > > > > > <script type="text/javascript"> > > > > > new Draggable(''d1'',{handle:''draghandle'', snap:[10,10]}); > > > > new Draggable(''d2'',{handle:''draghandle'', snap:[10,10]}); > > > > > Droppables.add(''drop1'', { > > > > onDrop: function(element){ > > > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop1.''; > > > > } > > > > }); > > > > Droppables.add(''drop2'', { > > > > onDrop: function(element){ > > > > $(''dropstatus'').innerHTML = ''Dropped '' + element.id + '' on drop2.''; > > > > } > > > > }); > > > > </script>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---