Thứ Hai, 23 tháng 12, 2013
HTML5 Kéo và thả
Kéo và thả
Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "lấy" một đối tượng và kéo nó đến một vị trí khác nhau.
Trong HTML5, kéo và thả là một phần của tiêu chuẩn, và bất kỳ yếu tố có thể kéo.
Hỗ trợ trình duyệt
Internet Explorer 9 +, Firefox, Opera, Chrome, và Safari hỗ trợ kéo và thả.
Lưu ý: Kéo và thả không làm việc trong Safari 5.1.2.
HTML5 Drag and Drop Ví dụ
Ví dụ dưới đây là một đơn giản kéo và thả các ví dụ:
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>
<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>
Thử nó cho mình »
Nó có vẻ phức tạp, nhưng cho phép đi qua tất cả các phần khác nhau của một sự kiện kéo và thả.
Làm cho một phần tử kéo
Đầu tiên của tất cả: Để thực hiện một phần tử kéo, thiết lập các thuộc tính kéo cho đúng:
<img draggable="true">
Những gì để Kéo - ondragstart và setData ()
Sau đó, xác định những gì sẽ xảy ra khi các phần tử được kéo.
Trong ví dụ trên, thuộc tính ondragstart gọi một chức năng, kéo (sự kiện), cho biết những dữ liệu sẽ được kéo.
Phương pháp dataTransfer.setData () thiết lập kiểu dữ liệu và các giá trị của dữ liệu kéo:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Trong trường hợp này, các kiểu dữ liệu là "Văn bản" và giá trị là id của các phần tử kéo ("drag1").
Nơi để thả - ondragover
Sự kiện ondragover xác định nơi dữ liệu có thể kéo được giảm xuống.
Theo mặc định, dữ liệu / yếu tố không thể bỏ trong các yếu tố khác. Cho phép giảm, chúng ta phải ngăn chặn việc xử lý mặc định của phần tử.
Này được thực hiện bằng cách gọi phương () event.preventDefault cho sự kiện ondragover:
event.preventDefault()
Làm Drop - ondrop
Khi dữ liệu được kéo giảm, một sự kiện xảy ra thả.
Trong ví dụ trên, thuộc tính ondrop gọi một chức năng, thả (sự kiện):
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));
}
Mã giải thích:
- Gọi preventDefault () để ngăn chặn xử lý trình duyệt mặc định của dữ liệu (mặc định là mở như liên kết trên thả)
- Lấy dữ liệu kéo với phương pháp ("Text") dataTransfer.getData. Phương pháp này sẽ trả lại bất kỳ dữ liệu đã được thiết lập để cùng loại trong setData () phương pháp
- Các dữ liệu kéo là id của phần tử kéo ("drag1")
- Thêm các yếu tố lôi kéo vào các yếu tố giảm
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét