Lab: Drap and Drop

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control movie playing as in the previous lab.
4. If you drag and drop the photo to the "play" area, the movie plays.
5. If you drap and drop the photo to the "pause" area, the movie pauses.



[canvas]

[text x="5" y="5"]
Drag picture between shopping cart and wishlist
[/text]

[view y ="30" ]
[simplelayout axis="x" spacing="5"/]
[view id="cart" bgcolor="#666699"
height="100" width="125"]
[text fgcolor="#FFFFFF"
x="5" y="5" ]Play[/text]
[/view]
[view id="wish" bgcolor="#666699"
height="100" width="125"]
[text fgcolor="#FFFFFF"
x="5" y="5" ]Pause[/text]
[/view]
[/view]

[view x="${cart.x+10}" y="${cart.y+55}"
resource="cd_cover.jpg"
onmousedown="dragging.apply()"
onmouseup="dragging.remove(); stop()"]

[dragstate name="dragging"/]

[method name="stop"]
if (this.x]wish.x) {
this.animate("x", wish.x+10, 300);
this.animate("y", wish.y+55, 300);
videoplayer.stop();
} else {
this.animate("x", cart.x+10, 300);
this.animate("y", cart.y+55, 300);
videoplayer.play();
}
[/method]
[/view]

[view x="10" y="140"]
[view id="videoplayer" play="true" resource="http:jfk.swf"][/view]
[/view]

[/canvas]