Kéo và thả - Drag And Drop

Ví dụ về kéo thả những đối tượng div sau:

Vị trí thả drop1

Đối tượng kéo drag1

Vị trí thả drop2

Đối tượng kéo drag2

Vị trí thả drop3

Code hoàn chỉnh

Ta tạo ra 3 div cho phép thả, 2 div cho phép kéo, và 3 hàm chính drag(),drop(),over() để thực hiện kéo thả.

<!DOCTYPE HTML>
<html>
<head>
<style>
body {font:normal bold 14px Times;}
.drop {width:200px; min-height:20px; padding:20px; border:1px solid #aaaaaa; margin-bottom:3px;}
#drag1,#drag2 {
	width:80%; padding:5px; background:blue; color:yellow; 
	cursor:pointer;border-radius:12px; box-shadow: 1px 2px 2px #ccc; 
}
#drag2 {background:red;}
</style>


</head>
<body>
<h1  id="idView">Kéo đối tượng div</h1>
<div id="drop1" class="drop"> Vị trí thả drop1 <div id="drag1">Đối tượng kéo drag1</div></div>
<div id="drop2" class="drop"> Vị trí thả drop2 <div id="drag2">Đối tượng kéo drag2</div></div>
<div id="drop3" class="drop"> Vị trí thả drop3 </div>

<script>
function ___(id) {return document.getElementById(id);}
function view(msg) {___('idView').innerHTML= msg;}

function drag(event) {
	event.dataTransfer.setData("text", event.target.id);
}
 
function drop(event) {
	event.preventDefault();
	var id= event.dataTransfer.getData("text");
	event.target.appendChild(___(id));
	view(id+" trong "+event.target.id);
}

function over(event) {
	event.preventDefault();
	view(event.target.id);
}

___('drag1').draggable= true;
___('drag1').ondragstart= drag;

___('drag2').draggable= true;
___('drag2').ondragstart= drag;

___('drop1').ondrop= drop;
___('drop2').ondrop= drop;
___('drop3').ondrop= drop;

___('drop1').ondragover= over;
___('drop2').ondragover= over;
___('drop3').ondragover= over;
</script>

</body>
</html>

datnuoctoi.com

Quê Hương Việt Nam.

Kéo và thả - Drag And Drop

Ví dụ về kéo thả những đối tượng div sau:

Code hoàn chỉnh

Gửi bài viết tới Facebook

Gửi hình ảnh

Popular Posts

Học tập theo đức tính của Bác

Biểu thức chính quy RegExp.

Đột phá: Các nhà khoa học Israel vừa tạo ra quả tim in 3D đầu tiên từ tế bào người

200 Tính từ thông dụng

Lời Của Gió - CS Anh Thơ mp3

Labels

Theme 2018: Quê Hương Việt Nam.

datnuoctoi.com

Quê Hương Việt Nam.

Kéo và thả - Drag And Drop

Ví dụ về kéo thả những đối tượng div sau:

Code hoàn chỉnh

Bài Viết Liên Quan:

Gửi bài viết tới Facebook

Gửi hình ảnh

Popular Posts

Học tập theo đức tính của Bác

Biểu thức chính quy RegExp.

Đột phá: Các nhà khoa học Israel vừa tạo ra quả tim in 3D đầu tiên từ tế bào người

200 Tính từ thông dụng

Lời Của Gió - CS Anh Thơ mp3

Labels

Theme 2018: Quê Hương Việt Nam.