thanks, I have found the right way to do it, After I created the
Drag.Move object from the clone, I must call start() on it
immediately.
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();
}
}).start();
On Sep 13, 3:27 pm, Tom Van Schoor <[EMAIL PROTECTED]> wrote:
> This is just an off-hand answer...
> What if you do a clone.fireEvent('mousedown') right after the clone is
> created?
> cheers,
> Tom Van Schoor
> jon schreef:A correction to my first problem: 1. When I clone an element that
> has the same coordinates as the original, then make the clone draggable, the
> mouse is still on the old object, so it doesn't start dragging until I
> release my mouse, then click on the clone again to drag. The behavior I want
> is: mousedown on an element, start dragging on the clone. How do I properly
> fix this? On Sep 13, 3:00 pm, jon<[EMAIL PROTECTED]>wrote: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]
