第05課 實現簡單的拖放功能

2021-08-24 19:51:53 字數 1806 閱讀 8407

在實現拖放功能中，分為三個步驟：

1.按下滑鼠，觸發mouseleftbuttondown事件，選擇要拖動的物件。

2.移動滑鼠，觸發mousemove事件，移動選擇的物件。

3.放開滑鼠，觸發mouseleftbuttonup事件，停止捕捉事件。

做乙個簡單的介面，用乙個按鈕來顯示拖放，如下xaml宣告：

<


canvas 


background


="#46461f">


<


button 


mouseleftbuttondown


="onmousedown" 


mousemove


="onmousemove"


mouseleftbuttonup


="onmouseup" 


canvas.left


="50" 


canvas.top


="50" 


background


="red"


fontsize


="18"


width


="160" 


height


="80">


<


button.content


>


<


stackpanel 


orientation


="horizontal" 


horizontalalignment


="center"


verticalalignment


="center">


<


image 


source


="smile_6.png">


image


>


<


textblock 


text


="拖動我" 


verticalalignment


="center" 


margin


="10">


textblock


>


stackpanel


>


button.content


>


button


>


canvas


>
這裡為了介面顯示效果，使用了控制項模板，後續會專門講到。

開始拖放操作，實現mouseleftbuttondown事件處理程式，用兩個全域性變數來記錄當前滑鼠的位置和滑鼠是否保持移動。

bool trackingmousemove = false;


point mouseposition;


void onmousedown(object sender, mousebuttoneventargs e)


}
移動物件，實現mousemove事件處理程式，計算元素的位置並更新，同時更新滑鼠的位置。

void onmousemove(object sender, mouseeventargs e)


}
完成拖放操作，實現mouseleftbuttonup事件處理程式。

void onmouseup(object sender, mousebuttoneventargs e)
最終，完成後的效果如下

拖動按鈕

文字示例**。

ListView之間的拖放功能的實現

listview之間的拖放功能的實現主要是要實現三個事件 itemdrag,dragenter,dragdrop.這三個事件只有第乙個事件是當前listview觸發的。其它的兩個都是由目標listview控制項觸發的。下面是我源 itemdrag事件 private void lvlocalfile...

原生JS實現簡單的拖放

最近學到了js中的事件，感覺和windows的事件佇列和處理函式很相似哈。需要監聽事件然後要有處理事件的函式。然後做了乙個小練習，元素的拖放。廢話不說了，上效果。實現子元素任意框拖放。首先在布局上，三個大盒子中的元素都是絕對定位於他們的父元素，給三個大盒子相對定位。上html和css cnt 1sp...

Qt 小專案 拖放系統的簡單實現

簡介 在自定義控制項中使用qt拖放機制。qt 拖放機制的實現 步驟 要使用qt的拖放機制，一般分三個部分 1 啟用 將自定義控制項設定為能夠接受drop事件。widget widget qwidget parent qwidget parent 2 重新實現dragenterevent void w...