HTML5 & CSS3 – Kéo, thả

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Mon, 28/01/2013, 21:53 (GMT+7)
0 Bình luận

HTML5 & CSS3 – Kéo, thả

Kéo thả là một tính năng rất phổ biến, đó là khi ta nắm một đối tượng ở vùng này thả sang vùng khác. Trong HTML5, kéo và thả là một phần tiêu chuẩn, tất cả các phần tử đều có thể nắm và kéo.

Ví dụ

<!DOCTYPE HTML> 

<html> 

<head> 

<script> 

function allowDrop(ev) 

{ 

ev.preventDefault(); 

} function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
} function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body> 

<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div> 

<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″> 

</body>
</html>

Thao tác:

Nắm và kéo

Thả vào phần đóng khung

Cách làm cho một phần tử kéo được, thêm thuộc tính draggable=”true”:

<img draggable="true">

Theo khoapham.vn

Tags:

best practices

Bạn thấy bài viết này như thế nào?:

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies