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]
