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