Hi Isaac,

As I say in your previous post, modify the for loop and you will have
some gain !
For the problem of the overflowed DIV, I think it's an error in
Scriptaculous, because it did not take the scrolled offset to parent.
So you could look at this inside the class.

if some guys around could confirm, I personnally thing it is a bug ??

I will be very curious, why drop inside a scrollable div, this is not
standard in design ??

And please don't repost, people take on there personnal time to help
others, and the way you present the problem, it seems that you want us
to do your (paid?) job !!

--
david


On 17 fév, 12:20, david <david.brill...@gmail.com> wrote:
> Hi javamaasai,
>
> try this portion of code to create droppable (instead of the FOR
> loop):
>
> $R(1,4).each(function(i){
>         Droppables.add('droppable_demo'+i, {
>                 accept: 'draggable',
>                 hoverclass: 'hover',
>                 onDrop: function(){
>                 alert(i);
>                         $('droppable_demo'+i).highlight();
>                 }
>         });
>
> });
>
> At this moment, you will see that there is not only the droppable 1
> that accept drops; but droppable 1 & 2 !
> This an an evolution ??
>
> But for the other problem you could still not drop on droppable 3 &
> 4 !!
>
> I didn't really know what it is, but you could see at the function
> cumulativeScrollOffset().
> I think it's because the droppable don't know that the element have
> scrolled and always take first element??
>
> btw, to drop on a scrollable zone is, to my opinion, not a good
> practice ! But you should have a good reason !
>
> --
> david
>
> On 16 fév, 15:09, javamaasai <ikhag...@gmail.com> wrote:
>
> > Hey All,
>
> > I'm creating a small online traditional Shop, where tourists can buy
> > African traditional goods. These include things like beads, Warrior
> > spears clothing e.t.c My web application has pictures of african items
> > draggables in an overflowed div and droppables pictures of visit
> > locations where one.
>
> > Issue is when multiple droppables are put in overflowed div and
> > scrolled, they kind of virtually remain fixed, i.e. droppable3 scrolls
> > to position of droppable1 but on dropping on droppable3 the active
> > drop area is for droppable1!
>
> > Here is small sample code test code:
>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
> > "http://www.w3.org/TR/xhtml1/DTD/...";>
> > <html xmlns="http://www.w3.org/1999/xhtml";>
> >     <head>
> >         <script src="javascript/prototype.js" type="text/javascript">
> >         <script src="javascript/scriptaculous.js" type="text/
> > javascript">
> >         </script>
> >     </head>
> >     <body>
> >         <style type="text/css">
>
> >             div#droppable_container {
> >                 margin-bottom: 30px;
> >                 height: 300px;
> >                 width: 500px;
> >                 background: black;
> >                 padding: 10px;
> >             }
>
> >             div#droppable_demo {
> >                 width: 160px;
> >                 height: 120px;
> >                 font-size: 15px;
> >                 background: #ffffff;
> >                 border: 5px solid #ccc;
> >                 text-align: center;
> >                 float: right;
> >             }
>
> >                         .droppable_demo {
> >                 width: 100px;
> >                 height: 100px;
> >                 font-size: 15px;
> >                 background: #ffffff;
> >                 border: 5px solid #ccc;
> >                 text-align: center;
> >                 float: left;
> >                 margin: 5px;
> >             }
>
> >             #draggable_demo {
> >                 background: yellowgreen;
> >                 margin: 5px;
> >                 border: 3px solid green;
> >                 width: 100px;
> >                 height: 100px;
> >                 cursor: move;
> >                 font-size: 15px;
> >                 float: left;
> >             }
>
> >             .spaceHolder {
> >                 background: orange;
> >                 margin: 5px;
> >                 border: 3px solid orangered;
> >                 width: 100px;
> >                 height: 100px;
> >                 font-size: 15px;
> >                 float: left;
> >             }
>
> >             div#droppable_demo.hover {
> >                 border: 5px dashed orange;
> >                 background: #efefef;
> >             }
> >                         .droppable_demo.hover {
> >                 border: 5px dashed orange;
> >                 background: #efefef;
> >             }
>
> >             #dragContainer {
> >                 background: yellow;
> >                 border: 5px solid blue;
> >                 float: left;
> >                 width: 60%;
> >                 height: 120px;
> >                 overflow: auto; /*This is where the weirdness
> > happens*/
> >             }
> >                         #dropContainer {
> >                 background: blue;
> >                 border: 5px solid red;
> >                 float: left;
> >                 width: 60%;
> >                 height: 120px;
> >                 overflow: auto; /*This is where the weirdness
> > happens*/
> >             }
>
> >             h3 {
> >                 color: black;
> >                 float: left;
> >             }
> >         </style>
> >         <div id="droppable_container">
> >             <div id="dragContainer">
> >                 <div class="draggable" id="draggable_demo">
> >                     DRAG ME!!!
> >                 </div>
> >                 <!-- space holders added to create overflow -->
> >                 <div class="spaceHolder">
> >                     Space Holder
> >                 </div>
> >                 <div class="spaceHolder">
> >                     Space Holder
> >                 </div>
> >                 <div class="spaceHolder">
> >                     Space Holder
> >                 </div>
> >             </div>
> >             <div id="dropContainer">
> >                 <div class="droppable_demo" id="droppable_demo1">
> >                     Drop here1!
> >                 </div>
> >                 <!-- space holders added to create overflow -->
> >                 <div class="droppable_demo" id="droppable_demo2">
> >                     Drop here2!
> >                 </div>
> >                 <div class="droppable_demo" id="droppable_demo3">
> >                     Drop here3!
> >                 </div>
> >                 <div class="droppable_demo" id="droppable_demo4">
> >                     Drop here4!
> >                 </div>
> >             </div>
> >         </div>
>
> >         <h3>Draggables in yellow container with blue border,
> > droppables in blue containter with red border. Drag green box to Drop
> > here 1, it will change bourder on hover. Then scroll the droppables in
> > blue until you can see half-botttom of Drop here 1 & Drop here 2 and
> > the last two Drop here 3 & 4.</h3>
> >         <script type="text/javascript">
> >             new Draggable('draggable_demo', {
> >                 revert: true,
> >                 ghosting: true // this is needed to avoid the
> > craziness of the overflowed div's scroll bars
> >             });
>
> >                         for (var i = 1; i <= 4; i++) {
> >                                 Droppables.add('droppable_demo'+i, {
> >                                         accept: 'draggable',
> >                                         hoverclass: 'hover',
> >                                         onDrop: function(){
> >                                                 
> > $('droppable_demo'+i).highlight();
> >                                         }
> >                                 });
> >                         }
> >             // These changes have been made to dragdrop.js
> >             // Index: src/dragdrop.js
> >             //
> > ===================================================================
> >             // --- src/dragdrop.js      (revision 8189)
> >             // +++ src/dragdrop.js      (working copy)
> >             // @@ -405,7 +405,7 @@
> >             //      if(this.options.ghosting) {
> >             //        if (!this.element._originallyAbsolute)
> >             //          Position.relativize(this.element);
> >             // -      delete this.element._originallyAbsolute;
> >             // +      this.element._originallyAbsolute = null;
> >             //        Element.remove(this._clone);
> >             //        this._clone = null;
> >             //      }
>
> >         </script>
> >     </body>
> > </html>
>
> > Please advise!
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to