網際網路應用系統 期末報告 Laszlo Drag and Drop 電子四乙 9326229 盧彥亨

Drag and Drop <canvas> <view y =&quot;30&quot; > <simplelayout axis=“x” spacing=“5”/> //axis=“x or y” 代表兩張 //canvas 相隔 x or y axis, //spacing 表示距離 <view id=“cart” bgcolor=“#666699” //view 可以替換成別的 // 字 , bgcolor 是背景顏色 height=&quot;200&quot; width=&quot;125&quot;> <text fgcolor=“#FFFFFF” //text 是 canvas 裡面的文字敘述 //fgcolor 是文字顏色 x=“5” y=“5” >Shopping Cart</text> // 右邊 canvas 上的字 </view>

Drag and Drop <view id=“wish” bgcolor=“#666699 “// 這裡的 wish 也只是代號 , 可 // 以任意更換 height=&quot;200&quot; width=&quot;125&quot;> <text fgcolor=“#FFFFFF” // 文字顏色 x=“5” y=“5” >Wish List</text> // 左邊 canvas 上的字 </view> </view>

<view id=“wish” bgcolor=“#666699 “// 這裡的 wish 也只是代號 , 可 // 以任意更換

height=&quot;200&quot; width=&quot;125&quot;>

<text fgcolor=“#FFFFFF” // 文字顏色

x=“5” y=“5” >Wish List</text> // 左邊 canvas 上的字

</view>

</view>

Drag and Drop < view x=“${cart.x+10}” y=“${cart.y+55}” //cart.x+10 表示圖片位 // 置 resource=“norahjones.jpg“ //Norah Jones 唱歌很好聽 onmousedown=“dragging.apply()“ //onmousedown 表示滑鼠右 // 鍵按下 dragging 拖曳 onmouseup=&quot;dragging.remove(); stop()&quot;> //onmouseup 表示滑鼠右鍵放開 <dragstate name=&quot;dragging&quot;/> // dragging 可以改成 dragger

< view x=“${cart.x+10}” y=“${cart.y+55}” //cart.x+10 表示圖片位 // 置

resource=“norahjones.jpg“ //Norah Jones 唱歌很好聽

onmousedown=“dragging.apply()“ //onmousedown 表示滑鼠右 // 鍵按下 dragging 拖曳

onmouseup=&quot;dragging.remove(); stop()&quot;>

//onmouseup 表示滑鼠右鍵放開

<dragstate name=&quot;dragging&quot;/> // dragging 可以改成 dragger

Drag and Drop <method name=“stop”> // 這個 method 讓圖片停在指定位置 if (this.x>wish.x) { // 當 (this.x>wish.x), 圖片移到右邊的 //canvas this.animate(&quot;x&quot;, wish.x+10, 300); this.animate(&quot;y&quot;, wish.y+55, 300); } else { // 否則停留在左邊的 canvas this.animate(&quot;x&quot;, cart.x+10, 300); this.animate(&quot;y&quot;, cart.y+55, 300); } </method> </view> <text x=&quot;5&quot; y=&quot;5&quot;> Drag picture between shopping cart and wishlist </text> </canvas>

<method name=“stop”> // 這個 method 讓圖片停在指定位置

if (this.x>wish.x) { // 當 (this.x>wish.x), 圖片移到右邊的

//canvas

this.animate(&quot;x&quot;, wish.x+10, 300);

this.animate(&quot;y&quot;, wish.y+55, 300);

} else { // 否則停留在左邊的 canvas

this.animate(&quot;x&quot;, cart.x+10, 300);

this.animate(&quot;y&quot;, cart.y+55, 300);

}

</method>

</view>

<text x=&quot;5&quot; y=&quot;5&quot;>

Drag picture between shopping cart and wishlist

</text>

</canvas>

Drag and Drop

Drag and Drop 在 Laszlo in 10 minutes 這裡面有很多不同形式的範例，不需要完全了解語法是怎樣，只要把範例程式部分修改就慢慢能夠了解大概的架構。而如果要更深入的話範例下面還有 for more detail 可以點選，裡面對這類型的範例描述更多。

在 Laszlo in 10 minutes 這裡面有很多不同形式的範例，不需要完全了解語法是怎樣，只要把範例程式部分修改就慢慢能夠了解大概的架構。而如果要更深入的話範例下面還有 for more detail 可以點選，裡面對這類型的範例描述更多。