Hello folks, i found a strange bug and need help with it. sorry for my bad english. The javascript below initiates 5 drag.moves on 5 elements. Each element can be dragged and each element will be added to the droppables list of the other elements. so each element is a draggable and a droppable for the other elements. And her is the bug: An element that cames after another element in dom cannot be dropped over a element that comes before in the dom.
examples:
element 1 can be dropped over 2,3,4,5
element 2 can be dropped only over 3,4,5
element 3 can be dropped only over 4,5
element 4 can be dropped only over 4
element 5 cannot be dropped over any element
the window.status in the example below shows you an info on entering a
element
This bug is not caused by the javascript drag.move initiation order
ahead. You can only affect this bug by reordering the elements in dom:
example: if you copy element drag_drop_5 to the top you can use the
other elements as droppables. but element 4 will not work with any
other element
i think there is something wrong with the function checkDroppables()
in drag.move
can somebody please help me? here is an simple example code using the
latest mootools version:
<html>
<head>
<script language="JavaScript" src="http://localhost/core4/
core_extensions/mootools/librarys/mootools/mootools-core-1.4.5-full-
nocompat.js"></script>
<script language="JavaScript" src="http://localhost/core4/
core_extensions/mootools/librarys/mootools/mootools-more-1.4.0.1-
drag.move.js"></script>
<script language="JavaScript">
window.addEvent("domready", function()
{
var drag_1 = new Drag.Move($('drag_drop_1'), {
snap: 0,
handle: $('drag_drop_1'),
onStart: function()
{
drag_1.droppables = Array();
var drops = $$('.drop');/* get
all droppables */
for (var s = 0; s <
drops.length; s++)
{
drag_1.droppables.push(drops[s]);
}
},
onEnter : function(element, droppable)
{
//if(droppable!=$('drag_drop_1'))
//{
window.status = 'over
droppable:'+droppable.get('id')+' -
droppable count:'+drag_1.droppables.length;
//}
},
onLeave : function(element, droppable)
{
window.status = 'leave';
},
onDrop: function(element, droppable)
{
window.status = 'dropped';
}
});
var drag_2 = new Drag.Move($('drag_drop_2'), {
snap: 0,
handle: $('drag_drop_2'),
onStart: function()
{
drag_2.droppables = Array();
var drops = $$('.drop');/* get
all droppables */
for (var s = 0; s <
drops.length; s++)
{
drag_2.droppables.push(drops[s]);
}
},
onEnter : function(element, droppable)
{
//if(droppable!=$('drag_drop_2'))
//{
window.status = 'over
droppable:'+droppable.get('id')+' -
droppable count:'+drag_2.droppables.length;
//}
},
onLeave : function(element, droppable)
{
window.status = 'leave';
},
onDrop: function(element, droppable)
{
window.status = 'dropped';
}
});
var drag_3 = new Drag.Move($('drag_drop_3'), {
snap: 0,
handle: $('drag_drop_3'),
onStart: function()
{
drag_3.droppables = Array();
var drops = $$('.drop');/* get
all droppables */
for (var s = 0; s <
drops.length; s++)
{
drag_3.droppables.push(drops[s]);
}
},
onEnter : function(element, droppable)
{
//if(droppable!=$('drag_drop_3'))
//{
window.status = 'over
droppable:'+droppable.get('id')+' -
droppable count:'+drag_3.droppables.length;
//}
},
onLeave : function(element, droppable)
{
window.status = 'leave';
},
onDrop: function(element, droppable)
{
window.status = 'dropped';
}
});
var drag_4 = new Drag.Move($('drag_drop_4'), {
snap: 0,
handle: $('drag_drop_4'),
//droppables: $$('.drop'),/* hat auch
keinen effekt */
onStart: function()
{
drag_4.droppables = Array();
var drops = $$('.drop');
for (var s = 0; s <
drops.length; s++)
{
drag_4.droppables.push(drops[s]);
}
},
onEnter : function(element, droppable)
{
//if(droppable!=$('drag_drop_4'))
//{
window.status = 'over
droppable:'+droppable.get('id')+' -
droppable count:'+drag_4.droppables.length;
//}
},
onLeave : function(element, droppable)
{
window.status = 'leave';
},
onDrop: function(element, droppable)
{
window.status = 'dropped';
}
});
var drag_5 = new Drag.Move($('drag_drop_5'), {
snap: 0,
handle: $('drag_drop_5'),
//droppables: $$('.drop'),/* hat auch
keinen effekt */
onStart: function()
{
drag_5.droppables = Array();
var drops = $$('.drop');
for (var s = 0; s <
drops.length; s++)
{
drag_5.droppables.push(drops[s]);
}
},
onEnter : function(element, droppable)
{
//if(droppable!=$('drag_drop_5'))
//{
window.status = 'over
droppable:'+droppable.get('id')+' -
droppable count:'+drag_5.droppables.length;
//}
},
onLeave : function(element, droppable)
{
window.status = 'leave';
},
onDrop: function(element, droppable)
{
window.status = 'dropped';
}
});
/* das aus start zu isolieren hat
keinen effekt */
});
</script>
</head>
<body>
<div id="drag_drop_1" class="drop"><h1>Hallo Welt 1</h1></div>
<div id="drag_drop_2" class="drop"><h1>Hallo Welt 2</h1></div>
<div id="drag_drop_3" class="drop"><h1>Hallo Welt 3</h1></div>
<div id="drag_drop_4" class="drop"><h1>Hallo Welt 4</h1></div>
<div id="drag_drop_5" class="drop"><h1>Hallo Welt 5</h1></div>
</body>
</html>
