Hi Isaac,
I've resolve your problem, I did not have the same version of
scriptaculous as you, but afetr modifying what you change, here is how
it works:
The problem was that the Draggable/Droppable method use
Position.within to verify if the mouse pointer is on an element or
not.
This function could use scrolled offset or not with the parameter:
Position.includeScrollOffsets which is set to false by default, just
apply the change on the for loop to use $R instead as I first
mention.
And set Position.includeScrollOffsets=true
==> now it work as you expected.
btw, Don't worry, As I say I do help in this group in my spare time,
but I WANTED it !!!
--
david
On 18 fév, 15:47, david <david.brill...@gmail.com> wrote:
> Hi Isaac,
>
> > Hope to soon become pro-javascriptor, senior scriptaculous african
> > Rep, will spread this good deed also by helping others in the forum.
> > Again humble apologies for rude way of problem presentation.
>
> Hope I can help you !!!
>
> On 18 fév, 13:23, javamaasai <ikhag...@gmail.com> wrote:
>
> > Dear David and All,
>
> > Still a newbie in the group, humble apologies again! Thank you for
> > taking time to respond to my issue, i'm also looking inside the class
> > to see if there's any thing i can change to make it work. Taking
> > javascript programming to new frontier in Africa creating, free
> > javascript tutorials for students here. was just pressured with time
> > since i'm free and soon to go back to work schedule.
>
> > Hope to soon become pro-javascriptor, senior scriptaculous african
> > Rep, will spread this good deed also by helping others in the forum.
> > Again humble apologies for rude way of problem presentation.
> > Thanks
>
> > Isaac
>
> > On Feb 18, 2:22 pm, david <david.brill...@gmail.com> wrote:
>
> > > 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">
> > > > >
>
> ...
>
> plus de détails »
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
