HTML5 & CSS3 – Kéo, thả

HTML5 & CSS3 – Kéo, thả

Link Demo

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

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

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

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
4 lý do Lazada Việt Nam thu hút nhân sự thế hệ Millennials

4 lý do Lazada Việt Nam thu hút nhân sự thế hệ Millennials

Lazada Việt Nam là một trong những đơn vị vừa được Tạp chí HR Asia trao giải Nơi làm việc tốt nhất châu Á và được xem như môi trường điển hình thu hút thế hệ Millennials khi 96% nhân sự thuộc thế hệ này.

Tản mạn về iTáo và sự bất công

Tản mạn về iTáo và sự bất công

Nói gì thì nói, iTáo đã tạo ra một cuộc cách mạng về công nghệ. Cứ nói đến điện thoại thông minh là phải nghĩ đến iPhone còn máy tính bảng là nghĩ ngay đến iPad.

Hướng dẫn Configuration Entities trong Drupal 8 rất đơn giản

Hướng dẫn Configuration Entities trong Drupal 8 rất đơn giản

With the overhaul of many API's in Drupal 8, one of the new kids on the block is the configuration system with its integration with the entity API.

Công ty diệt chuột T&C

 

Diet con trung