期末報告:Drag And Drop

我所選的是 Drag And Drop 因為眾所週知的google 在她推出的igoogle中
就提供了類似的的拖曳功能，這樣的功能提供了高度的互動性及自由度`,所以我很感興趣。

以下為整段程式碼


分析如下
在一開始第3行的
simplelayout 所提供的一個類別 放在 之中可用來控制view中物件放置的格式，在這個例子中

axis="x" => 物件延著X軸放置
spacing="5" => 每個物件建個5個像素

接下來的4~14行是構成我們畫面上的wish與shopping兩個cart也就是下圖兩個黃色所標示的範圍

fgcolor="#FFFFFF"=>設定這個物件的前景色

bgcolor="#666699" =>設定這個物件的背景色

我們也可以發現這兩個cart中間有間隔就是前面simplelayout的效果。

接下來的16~32行就是整個Drag And Drop 最重要的部份。在這部分我們建立了我們要進行拖曳動作的物件以及一些相關處理他的作法
我們要進行拖曳的物件為norahjones.jpg這張圖，以resouce將他引入進來。
在第18,19行就是控制拖曳的方法

onmousedown="dragging.apply()" =>當滑鼠按下時，可以拖曳物件
onmouseup="dragging.remove(); stop() =>當滑鼠放開，拖曳的效果解除並stop

關於stop的動作在後面會有更詳細的設定。
dragstate 是她預設好用來控制drag相關動作的東西，再這邊還可加入一些相關的參數 去設定你要拖曳的範圍限制比如說控制它只能做水平或垂直的表現。或者更近一步限制他只能在某個範圍最小多少，最大到多少。

第23行到第31行中
描述的是當我們鬆開滑鼠物件要停止下來的一些相關設定，為了讓物件只能在我們指定的範圍停下來而做此設計
宣告一個 method取名為stop

this所指向的物件就是我們所拖曳的物件，this.x就是我們拖曳物件的x座標，當他超過某個wish的範圍直接將物件定位在25 ,26行所標示的位置(也就是wish所在的範圍)。反之定位在28,29行所描述的位置(也就是cart所在的範圍)。

總結
在這個範例中我們可以學到基本畫面的佈局的設計方法(simplelayout)，以及拖曳控制的方法(dragstate)。另外還有滑鼠事件的描述(onmouseup,onmousedown)