Kéo và Thả
Kéo và thả là một tính năng rất thông dụng của HTML5. Nó được sử dụng khi bạn muốn lựa chọn một đối tượng và kéo nó vào một vị trí khác.
Trong HTML5, kéo - thả là một chuẩn và bất kì phần tử nào cũng có thể được kéo thả.
Ví dụ về Kéo - Thả trong HTML5
Ví dụ kéo thả
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:215px;height:55px;padding:10px;border:1px solid #aaaaaa;}</style>
<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>
<p>Kéo logo của Tự học web vào ô trống bên trên:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/themes/default/images/logo.png" draggable="true"ondragstart="drag(event)" width="215" height="55">
</body>
</html>
Chạy thử code<html>
<head>
<style>
#div1 {width:215px;height:55px;padding:10px;border:1px solid #aaaaaa;}</style>
<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>
<p>Kéo logo của Tự học web vào ô trống bên trên:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/themes/default/images/logo.png" draggable="true"ondragstart="drag(event)" width="215" height="55">
</body>
</html>
Ví dụ trên nhìn có vẻ phức tạp, tuy nhiên bạn hãy kiên nhẫn xem hết các phần khác tiếp theo dưới đây:
Làm cho một phần tử có thể kéo thả
Đầu tiên: để cho phép cho một phần tử có thể kéo thả, xác lập thuộc tính draggable của nó là true:
<img draggable="true">
Cái gì được di chuyển - thuộc tính ondragstart và hàm setData()
Sau đó, xác lập điều gì sẽ xảy ra khi phần tử bị kéo đi.
Trong ví dụ ở trên, thuộc tính ondragstart gọi tới hàm drag(event), hàm này sẽ xác định xem đối tượng nào đang được kéo đi.
Hàm dataTransfer.setData() thiết lập kiểu dữ liệu và giá trị của đối tượng bị kéo đi:
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
ev.dataTransfer.setData("Text", ev.target.id);
}
Trong trường hợp này, kiểu dữ liệu sẽ là "Text" và giá trị là id của phần tử bị kéo ("drag1").
Kéo đi đâu - ondragover
Sự kiện ondragover xác dịnh đối tượng bị kéo sẽ được thả vào đâu.
Mặc định, các phần tử bị di chuyển sẽ không thể được thả vào các phần tử khác. Để cho phép điều này, chúng ta phải chặn việc xử lý mặc định của phần tử đó.
Để thực hiện, sử dụng hàm event.preventDefault() cho sự kiện ondragover:
event.preventDefault()
Thực hiện việc thả - ondrop
Khi đối tượng bị kéo được thả, một sự kiện sẽ xảy ra.
Trong ví dụ trên, thuộc tính ondrop gọi tới một hàm drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Giải thích đoạn mã trên:
- Gọi hàm preventDefault() để chặn sự xử lý mặc định trên đối tượng
- Lấy dữ liệu được kéo bằng hàm dataTransfer.getData("Text"). Hàm này sẽ trả về bất kì dữ liệu nào được xác lập cùng một kiểu dữ liệu trong hàm setData()
- Dữ liệu được kéo ở đây chính là id của phần tử bị kéo ("drag1")
- Chèn phần tử bị kéo vào phần tử được thả
1 nhận xét:
Write nhận xét34338529 // 123456a@
ReplyEmoticonEmoticon