trình bày từng bước thao tác kéo thả đối tượng drag and drop

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG CAO ĐẲNG CN & KD VIỆT TIẾN
KHOA MÁY TÍNH
Môn: Công Nghệ .Net
ĐỀ TÀI: Trình bày từng bước thao tác kéo thả đối tượng
Drag And Drop
Giảng viên hướng dẫn: Trịnh Đức Tính
Sinh viên thực hiện: Nguyễn Đình Hải Quân
Lớp: C10T1
MSSV: 100157
Đà Nẵng, Ngày 14 tháng 11 năm 2012
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Mục Lục
Đà Nẵng, Ngày 14 tháng 11 năm 2012 1
Tìm hiểu chương trình:
Chương trình gồm một ô Listbox để hiển thị các thông tin của các kiểu dữ liệu. Hai ô Textbox,
trong đó Textbox1 dùng để hiển thị thông tin chi tiết của các kiểu dữ liệu mà ta chọn bên listbox khi
ta kích chọn trong Listbox một tên loại kiểu dữ liệu thì ô textbox1 sẽ hiển thị hình ảnh loài hoa mà
ta chọn 7
Trang | 2
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
I. Tổng Quan
Drag-Drop là đề cập đến truyền dữ liệu trong đó một con chuột hoặc thiết bị trỏ khác
được sử dụng để xác định cả các nguồn dữ liệu và đích của nó.
Trong một hoạt động kéo và thả điển hình, người sử dụng lựa chọn các đối tượng được
chuyển giao bằng cách di chuyển con trỏ chuột vào nó và giữ một trong hai nút trái hoặc
nút phải một số khác được chỉ định cho mục đích này.
Trong khi tiếp tục giữ nút, người dùng bắt đầu chuyển giao bằng cách kéo các đối tượng
đến đích của nó và thả.

Drag-Drop cung cấp chính xác các chức năng tương tự như sao chép vào clipboard và
dán vào đối tượng chấp nhận hoạt động này. Trong thực tế, nếu một ứng dụng hỗ trợ sao
chép và dán vào clipboard, thì việc thiết kế một chương trình có chức năng kéo thả là rất
cần thiết để hỗ trợ người dùng.
II. Ứng Dụng Drag-Drop
1. Xây dựng chương trình kéo thả hình ảnh
Giao diện như sau:
Trang | 3
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Tìm hiểu chương trình:
Chương trình gồm một ô listbox để hiển thị các thông tin tên hoa. Hai ô Picturebox,
trong đó Picturebox1 dùng để hiển thị hình ảnh khi ta kích chọn trong Listbox một tên
loại hoa thì ô Picturebox1 sẽ hiển thị hình ảnh loài hoa mà ta chọn.
Ô Picturebox2 được tạo ra nhằm mục đích để cho ta thấy việc kéo thả từ PictureBox1
sang PictureBox2 và ngược lại.
Thiết kế chương trình:
Các thuộc tính thay đổi nhau sau:
- Listbox: thuộc tính name là lbldanhsach
- Picturebox1: Thuộc tính name là hinhbentrai
- Picturebox2: Thuộc tính name là hinhbenphai
Viết mã:
Tạo thủ tục cho lbldanhsach thủ tục này có tác dụng khi người dùng kích vào thì
sẽ hiển thị các hình ảnh theo list đã được sắp xếp sẵn.
Private Sub lbldanhsach_SelectedIndexChanged(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles lbldanhsach.SelectedIndexChanged
Select Case lbldanhsach.SelectedIndex
Case 0
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoasungtim

Case 1
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoamaudon
Case 2
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoalongden
Case 3
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoaloaken
Case 4
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoalily
Case 5
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoakimtram
Case 6
Trang | 4
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoadaquy
Case 7
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoacucthuy
Case Else
hinhbentrai.Image = _
Global.p_drag_drop.My.Resources.hoacucbattu
End Select
End Sub
Tạo thủ tục form load thủ tục này có tác dụng khởi tạo thuộc tính chấp nhận kéo

thả của hai PictureBox.
Private Sub drag_drop_hinhanh_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load
hinhbentrai.AllowDrop = True ' Luôn chấp nhận khi hình được thả vào!
hinhbenphai.AllowDrop = True ' Luôn chấp nhận khi hình được thả vào!
End Sub
Tạo thủ tục MouseDown cho PictureBox thủ tục này có tác dụng gọi hoạt động
kéo thả.
Private Sub PictureBox_MouseDown(ByVal sender As System.Object, ByVal e As _
System.Windows.Forms.MouseEventArgs) Handles hinhbentrai.MouseDown, _
hinhbenphai.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
Dim pic As PictureBox = CType(sender, PictureBox)
' Gọi sự kiện kéo thả
If Not pic.Image Is Nothing Then
pic.DoDragDrop(pic.Image, DragDropEffects.Move)
End If
End If
End Sub
Trang | 5
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Tạo thủ tục Picturebox_DragEnter thủ tục này có tác dụng thực hiện kiểm tra và
thả hình ảnh.
Private Sub PictureBox_DragEnter(ByVal sender As System.Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles hinhbentrai.DragEnter, _
hinhbenphai.DragEnter
' Kiểm tra việc kéo thả có đúng không?
' Nếu việc kéo thả không đúng thì sẽ ko thực hiện việc thả
If (e.Data.GetDataPresent(DataFormats.Bitmap)) Then

e.Effect = DragDropEffects.Move
Else
e.Effect = DragDropEffects.None
End If
End Sub
Tạo thủ tục PictureBox_Dragdrop thủ tục này có tác dụng xử lý sự kiện kéo thả
và điều khiên hình hình trong Picturebox.

Private Sub PictureBox_DragDrop(ByVal sender As System.Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles hinhbentrai.DragDrop, _
hinhbenphai.DragDrop
'Xử lý sự kiện DragDrop, và điều khiển PictureBox vừa chọn
' Hiển thị hình ảnh trong PictureBox đã chọn
Dim pic As PictureBox = CType(sender, PictureBox)
pic.Image = CType(e.Data.GetData(DataFormats.Bitmap), Bitmap)
If sender Is hinhbentrai Then
hinhbenphai.Image = Nothing
Else
hinhbentrai.Image = Nothing
End If
End Sub
Chạy chương trình:
Chúng ta nhấn F5 để chạy chương trình và chọn một tên loài hoa trong Listbox để hiển
thị ảnh, sau đó thực hiện kéo thả các hình ảnh đó trong PictureBox
Trang | 6
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
2. Xây Dựng chương trình kéo thả hình ảnh
Giao diện như sau:
Tìm hiểu chương trình:

Chương trình gồm một ô Listbox để hiển thị các thông tin của các kiểu dữ
liệu. Hai ô Textbox, trong đó Textbox1 dùng để hiển thị thông tin chi tiết của các
kiểu dữ liệu mà ta chọn bên listbox khi ta kích chọn trong Listbox một tên loại
kiểu dữ liệu thì ô textbox1 sẽ hiển thị hình ảnh loài hoa mà ta chọn
Ô Textbox2 được tạo ra nhằm mục đích để cho ta thấy việc kéo thả từ Textbox1
sang Textbox2 và ngược lại.
Thiết kế chương trình:
Các thuộc tính thay đổi nhau sau:
Listbox: có name là lbldanhsach
Textbox1: có name là txtnguon
Textbox2: có name là txtdich
Trang | 7
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Viết mã:
- Khai báo biến: Bạn phải khai báo các biến ( đặt dưới dòng Public Class
Drag_drop_vanban )
Dim Sh As Short
Dim I As Integer
Dim L As Long
Dim Sg As Single
Dim Db As Double
Dim Dc As Decimal
Dim B As Byte
Dim Ch As Char
Dim Str As String
Dim Bo As Boolean
Dim Da As Date
Tạo thủ tục form load cho form Drag_drop_vanban_Load thủ tục này có tác dụng
add các item vào lbldanhsach khi form được load lên

ListBox1.Items.Add("Short")
ListBox1.Items.Add("Integer")
ListBox1.Items.Add("Long")
ListBox1.Items.Add("Single")
ListBox1.Items.Add("Double")
ListBox1.Items.Add("Decimal")
ListBox1.Items.Add("Byte")
ListBox1.Items.Add("Char")
ListBox1.Items.Add("String")
ListBox1.Items.Add("Boolean")
ListBox1.Items.Add("Date")
Tạo thủ tục lbldanhsach_SelectedIndexChanged thủ tục này có tác dụng để hiện
thông tin lên txtnguon như sau:
Private Sub lbldanhsach_SelectedIndexChanged(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles lbldanhsach.SelectedIndexChanged
Select Case lbldanhsach.SelectedIndex
Case 0
txtnguon.Text = "Độ dài: -32,678 - 32,767. Ví dụ: "
Trang | 8
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Sh = 1000
txtnguon.Text &= Sh
Case 1
I = 4000
txtnguon.Text = "Độ dài: -2,147,483,648 đến 2,147,483,647. Ví dụ: "
txtnguon.Text &= I
Case 2
L = 3988890343
txtnguon.Text = "Độ dài: -9,233,372,036,854,775,808 đến"& _

"9,233,372,036,854,775,807. " & _
"Ví dụ: "
txtnguon.Text &= L
Case 3
Sg = 899.99
txtnguon.Text = "Độ dài: -3.402823E38 đến 3.402823E38 " & _
"Ví dụ: "
txtnguon.Text &= Sg
Case 4
Db = 3.14159265
txtnguon.Text = "Độ dài: -1.797631348623E308 đến 1.797631348623E3. "& _
"Ví dụ: "
txtnguon.Text &= Db
Case 5
Dc = 7234734.5
txtnguon.Text = "Độ dài: Trong khoảng +/-79,228x1024. " & _
"Ví dụ: "
txtnguon.Text &= Dc
Case 6
B = 12
txtnguon.Text = "Độ dài: 0-255. " & _
"Ví dụ: "
txtnguon.Text &= B
Case 7
Ch = "N"
txtnguon.Text = "Độ dài: 0-65,536. " & _
"Ví dụ: "
txtnguon.Text &= Ch
Case 8
Str = "Đức Lập"

txtnguon.Text = "Chứa 0 đến 2 tỷ ký tự. " & _
"Ví dụ: "
txtnguon.Text &= Str
Case 9
Trang | 9
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Bo = True
txtnguon.Text = "True hay False. " & _
"Ví dụ: "
txtnguon.Text &= Bo
Case 10
Da = Now.Date
txtnguon.Text = "Từ 1/1/1 đến 31/12/9999. " & _
"Ví dụ: "
txtnguon.Text &= CStr(Da)
End Select
End Sub
Tạo thủ tục có tên txtnguon_MouseDown thủ tục này có tác dụng gọi hoạt động
kéo thả
Private Sub txtnguon_MouseDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles _
txtnguon.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
txtnguon.SelectAll()
'Gọi hoạt động kéo thả
txtnguon.DoDragDrop(txtnguon.SelectedText,_
DragDropEffects.Move)
End If
End Sub

Tạo thủ tục có tên thutucchapnhan_DragDrop thủ tục này có tác dụng nhận dữ
liệu và đưa vào txtdich
Private Sub thutucchapnhan_DragDrop(ByVal sender As Object, _
ByVal e As System.Windows.Forms.DragEventArgs) Handles _
txtdich.DragDrop
txtdich.Text = e.Data.GetData(DataFormats.Text).ToString
'Lấy dữ liệu txtdich
txtnguon.Text = "" 'khi chọn txtdich thì txtnguon sẽ
'rỗng để khi drop sẽ ko bị chồng lên nhau
End Sub
Tạo thủ tục có tên thutucthadulieu_DragEnter thủ tục này có tác dụng thả dữ liệu
Private Sub thutucthadulieu_DragEnter(ByVal sender As _
System.Object, ByVal e As System.Windows.Forms.DragEventArgs)_
Handles txtdich.DragEnter
e.Effect = DragDropEffects.Move
Trang | 10
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
End Sub
Chạy chương trình:
Chúng ta nhấn F5 để chạy chương trình và chọn một tên kiểu dữ liệu trong Listbox để
hiển thị ảnh, sau đó thực hiện kéo thả các thông tin được hiển thị đó sang textbox2
Trang | 11
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
3. Xây dựng chương trình kéo thả các nút
Giao diện như sau:
Tìm hiểu chương trình
Chương trình được tạo gồm hai đối tượng Tree View, tác dụng của chương trình này sẽ
mô tả cho Chúng ta thấy ứng dụng của việc kéo thả các nút hay các đối tượng dữ liệu

trong máy tính, được thể hiện dưới dạng cây thư mục để kéo thả dữ liệu từ cây thư mục
nguồn sang cây thư mục đích.
Thiết kế chương trình:
Các thuộc tính thay đổi nhau sau:
- TreeView1: Thuộc tính name là tvwLeft
- TreeView2: Thuộc tính name là tvwRight
Trang | 12
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Đặt giá trị của tvwLeft ở thuộc tính Nodes như hình sau:
Trang | 13
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Đặt giá trị của tvwRight ở thuộc tính Nodes như hình sau:
Viết mã:
Tạo thủ tục TreeView_DragDrop thủ tục này có tác dụng khởi tạo việc kéo thả.
Private Sub TreeView_DragDrop(ByVal sender As System.Object, _
ByVal e As System.Windows.Forms.DragEventArgs) Handles _
tvwLeft.DragDrop, tvwRight.DragDrop
' Khởi tạo biến với các nút kéo để sử dụng
Dim OriginationNode As TreeNode = _
CType(e.Data.GetData("System.Windows.Forms.TreeNode"), TreeNode)
' Gọi sử dụng dữ liệu
If e.Data.GetDataPresent("System.Windows.Forms.TreeNode", False) Then
Dim pt As Point
Dim DestinationNode As TreeNode
pt = _
CType(sender, TreeView).PointToClient(New Point(e.X, e.Y))
DestinationNode = _
CType(sender, TreeView).GetNodeAt(pt)

If DestinationNode IsNot Nothing Then
Trang | 14
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
If Not DestinationNode.TreeView Is OriginationNode.TreeView Then
DestinationNode.Nodes.Add(CType(OriginationNode.Clone, TreeNode))
DestinationNode.Expand()
OriginationNode.Remove()
End If
End If
End If
End Sub
Tạo thủ tục thadulieu_DragEnter thủ tục này có tác dụng kiểm tra việc kéo thả,
nếu việc kéo thả đúng thì sẽ thực hiện di chuyển các nút.
Private Sub thadulieu_DragEnter(ByVal sender As System.Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles tvwLeft.DragEnter, _
tvwRight.DragEnter
' kiểm tra nội dung kéo thả, nếu đúng thì sẽ thực hiện còn sai thì ko thực hiện
If (e.Data.GetDataPresent("System.Windows.Forms.TreeNode")) Then
e.Effect = DragDropEffects.Move
Else
e.Effect = DragDropEffects.None
End If
End Sub
Tạo thủ tục thutucnhan_ItemDrag thủ tục này có tác dụng gọi hoạt động kéo thả ở
trên được diễn ra.
Private Sub thutucnhan_ItemDrag(ByVal sender As System.Object, ByVal e As _
System.Windows.Forms.ItemDragEventArgs) Handles tvwLeft.ItemDrag, _
tvwRight.ItemDrag
If e.Button = Windows.Forms.MouseButtons.Left Then

'Gọi hoạt động kéo thả
DoDragDrop(e.Item, DragDropEffects.Move)
End If
End Sub
Chạy chương trình:
Chúng ta nhấn F5 để chạy chương trình và chọn một giá trị của một trong hai ô
TreeView để thực hiện việc di chuyển các nút
Trang | 15
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
4. Xây dựng chương trình kéo thả các đối tượng có trên form
Giao diện như sau:
Tìm hiểu chương trình:
Chương trình được tạo gồm các đối tượng cho trước như Button, Label, Textbox,
Listbox
Chức năng của chương trình này là để người dùng thấy được sự di chuyển của các đối
tượng trong form bằng việc sử dụng chức năng Drag-Drop có trong VB.Net.
Thiết kế chương trình:
Các thuộc tính thay đổi nhau sau:
- Button: có thuộc tính name là Button1
- Label: có thuộc tính name là Label1
- Textbox: có thuộc tính name là Texbox1
- Listbox: có thuộc tính name là Listbox1
Trang | 16
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Viết mã:
Đầu tiên ta khai báo biến Dim dichuyen As Point được để dưới (Public Class
cac_dangkeothakhac)
Biến này có tác dụng xác định toạ độ khi sử dụng

Tạo thủ tục Button1_MouseDown thủ tục này có tác dụng xác định vị trí đối
tượng Button
Private Sub Button1_MouseDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles Button1.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
dichuyen = e.Location
End If
End Sub
Tạo thủ tục Button1_MouseMove thủ tục này có tác dụng di chuyển đối tượng
Button sang vị trí mới
Private Sub Button1_MouseMove(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles Button1.MouseMove
If e.Button = Windows.Forms.MouseButtons.Left Then
Button1.Location += e.Location - dichuyen
End If
End Sub
Cũng tương tự ta viết thủ tục cho Label, Textbox, Listbox gồm các thủ tục như của
Button1 như sau:
Tạo thủ tục Label1_MouseDown thủ tục này có tác dụng xác định vị trí đối tượng
Label
Private Sub Label1_MouseDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles Label1.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left Then
dichuyen = e.Location
End If
End Sub
Trang | 17
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
Tạo thủ tục Label1_MouseMove thủ tục này có tác dụng di chuyển đối tượng

Label1 sang vị trí mới
Private Sub Label1_MouseMove(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) Handles Label1.MouseMove
If e.Button = Windows.Forms.MouseButtons.Left Then
Label1.Location += e.Location - dichuyen
End If
End Sub
Các đối tượng khác tương tự.
Chạy chương trình:
Chúng ta nhấn F5 để chạy chương trình và chọn một đối tượng trên form sau đó kéo
chúng di chuyển đến một nơi khác rồi thả.
Trang | 18
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
III. Kết Luận
Với những kiến thức đã học, với sự giúp đỡ tận tình của các anh chị trên diễn đàn câu
lạc bộ Vb, cùng giáo viên bộ môn Công nghệ .Net em đã thu thập được những kinh
nghiệm hết sức quý báu.
Kết hợp cùng với kiến thức đã được trang bị trên lớp em đã có một số suy nghĩ nhằm
hoàn thiện đề tài đã giao.
Tuy nhiên với trình độ thực tiễn còn hạn chế và một số khó khăn gặp phải trong lúc thực
hiện đề tài nên cũng không thể tránh khỏi những thiếu sót em rất mong nhận được sự ý
kiến đóng góp từ thầy đề đề tài của em được hoàn thiện hơn.
Em xin chân thành cảm ơn thầy Trịnh Đức Tính đã hướng dẫn cho em hoàn thành đồ án
này. Kính chúc thầy sức khoẻ dồi dào và đạt được nhiều thành tích trong công việc.
Đà Nẵng, ngày 14
tháng 11 năm 2012.
Sinh viên thực hiện
Nguyễn Đình Hải Quân
Trang | 19

Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
IV. Đánh giá và nhận xét của giáo viên bộ môn

















Trang | 20
Báo cáo đồ án môn Công Nghệ .Net SVTH: Nguyễn
Đình Hải Quân
V. Tài liệu tham khảo
Bài báo cáo có sử dụng một số tài liệu ở các nguồn sau:
www. caulacbovb .com
www. diendan.congdongcviet.com
www. msdn.microsoft.com

Trang | 21