I have two problems with a simple drag and drop scenario: 1. I have to
drag the object twice for it to move. Meaning I have to enter the
draggable object, start dragging, then stop dragging, then start
dragging again to really drag the object... The first dragging action
didn't seem to work.
2. when the enter event occurs, I did some background effects
tweening, but nothing happens.. The js and html code is as follows,
please help thanks!
[code=text]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="javascript" type="text/javascript" src="includes/
mootools-1.2-core-nc.js"></script>
<script language="javascript" type="text/javascript" src="includes/
mootools-1.2-more.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
var drop = $('drop');
var dropFx = new Fx.Tween(drop);
$$('.draggable').each(function(item){
item.addEvent('mousedown', function(e){
e=new Event(e).stop();
var coord=this.getCoordinates();
var clone = this.clone()
.setStyles(coord) // this returns an object with
left/top/bottom/right, so its perfect
.setStyles({'opacity': 0.7})
.inject(document.body);
/*
clone.onclick=function(ev){
new Event(ev).stop();
} */
var dr = new Drag.Move(clone, {
droppables:[drop],
snap: 0,
onSnap: function(el){
},
onEnter: function(el){
dropFx.start('background-
color','7389AE').chain(dropFx.start.pass(['background-
color','ffffff'], dropFx));
},
onDrop:function(el, dropped){
this.detach();
clone.destroy();
}
}).attach();
});
});
});
</script>
</head>
<body>
<div class="draggable" style="height:100px;width:100px;background-
color:yellow;">
</div>
<div id="drop" style="height:100px;width:100px;background-
color:red;">
</div>
</body>
</html>[/code]
