script.aculo.us - Kéo và thả
Tính năng phổ biến nhất của giao diện Web 2.0 là cơ sở kéo và thả. May mắn thay script.aculo.us đi kèm với một khả năng cố hữu để hỗ trợ kéo và thả.
Để sử dụng khả năng kéo của script.aculo.us, bạn cần tải dragdrop mô-đun này cũng yêu cầu effectsmô-đun. Vì vậy, tải tối thiểu của bạn cho script.aculo.us sẽ giống như sau:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Kéo những thứ xung quanh
Rất đơn giản để tạo một mục có thể kéo bằng script.aculo.us. Nó yêu cầu tạo một thể hiện của lớp Draggable và xác định phần tử được tạo ra có thể kéo được.
Cú pháp có thể kéo
new Draggable( element, options );Tham số đầu tiên của hàm tạo xác định phần tử sẽ được tạo ra có thể kéo được dưới dạng id của phần tử hoặc tham chiếu đến phần tử. Tham số thứ hai chỉ định thông tin tùy chọn về cách hoạt động của phần tử có thể kéo.
Tùy chọn có thể kéo
Bạn có thể sử dụng một hoặc nhiều tùy chọn sau trong khi tạo đối tượng có thể kéo của mình.
| Lựa chọn | Sự miêu tả | Ví dụ |
|---|---|---|
| hoàn nguyên | Nếu được đặt thành true , phần tử sẽ trở lại vị trí ban đầu khi quá trình kéo kết thúc. Cũng chỉ định liệu lệnh gọi lại hiệu ứng hoàn nguyên sẽ được gọi khi thao tác kéo dừng lại. Giá trị mặc định là false . | Thí dụ |
| búng tay | Được sử dụng để làm cho một người có thể kéo dính vào lưới hoặc hạn chế chuyển động của nó. Nếu sai (mặc định), không xảy ra hiện tượng bắt hoặc ràng buộc.
|
Thí dụ |
| zindex | Chỉ định CSS z-index sẽ được áp dụng cho phần tử trong một thao tác kéo. Theo mặc định, chỉ số z của phần tử được đặt thành 1000 trong khi kéo. | Thí dụ |
| bóng ma | Boolean xác định xem có nên sao chép bản sao để kéo hay không, giữ nguyên bản gốc cho đến khi bản sao được bỏ. Giá trị mặc định là false . | Thí dụ |
| hạn chế | Một chuỗi được sử dụng để giới hạn các hướng có thể kéo, theo chiều ngang hoặc chiều dọc . Mặc định là null có nghĩa là chuyển động tự do. | Thí dụ |
| xử lý | Chỉ định một phần tử được sử dụng làm tay cầm để bắt đầu thao tác kéo. Theo mặc định, một phần tử là tay cầm của chính nó. | Thí dụ |
| hình sao | Một hiệu ứng được gọi trên phần tử khi bắt đầu kéo. Theo mặc định, nó thay đổi độ mờ của phần tử thành 0,2 trong 0,2 giây. | Thí dụ |
| hồi âm | Một hiệu ứng được gọi trên phần tử khi kéo được hoàn nguyên. Đặt mặc định cho một trang chiếu mượt mà về vị trí ban đầu của phần tử. Chỉ được gọi nếu hoàn nguyên là đúng. | Thí dụ |
| endeffect | Một hiệu ứng được gọi trên phần tử khi quá trình kéo kết thúc. Theo mặc định, nó thay đổi độ mờ của phần tử thành 1,0 trong 0,2 giây. | Thí dụ |
Tùy chọn gọi lại
Ngoài ra, bạn có thể sử dụng bất kỳ hàm gọi lại nào sau đây trong tham số tùy chọn -
| Chức năng | Sự miêu tả | Ví dụ |
|---|---|---|
| băt đâu | Được gọi khi bắt đầu kéo. | Thí dụ |
| onDrag | Được gọi nhiều lần khi chuột di chuyển, nếu vị trí chuột thay đổi so với lần gọi trước. | Thí dụ |
| thay đổi | Được gọi giống như onDrag (là cách gọi lại ưu tiên). | Thí dụ |
| vào cuối | Được gọi khi kết thúc kéo. | Thí dụ |
Ngoại trừ lệnh gọi lại "thay đổi", mỗi lệnh gọi lại này chấp nhận hai tham số: đối tượng Draggable và đối tượng sự kiện chuột.
Ví dụ có thể kéo
Ở đây, chúng tôi xác định 5 phần tử có thể kéo được: ba phần tử <div>, một phần tử <img> và một phần tử <span>. Mục đích của ba phần tử <div> khác nhau là để chứng minh rằng bất kể một phần tử bắt đầu bằng quy tắc định vị tĩnh (mặc định), tương đối hoặc tuyệt đối, hành vi kéo vẫn không bị ảnh hưởng.
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bỏ những thứ đã kéo
Một phần tử được chuyển đổi thành mục tiêu thả thông qua lệnh gọi phương thức add () trong không gian tên được gọi là Droppables .
Không gian tên Droppables có hai phương thức quan trọng: add () để tạo mục tiêu thả và remove () để xóa mục tiêu thả.
Cú pháp
Đây là cú pháp của phương thức add () để tạo mục tiêu thả. Phương thức add () tạo ra một mục tiêu thả ra khỏi phần tử được truyền làm tham số đầu tiên của nó, sử dụng các tùy chọn trong hàm băm được truyền dưới dạng tham số thứ hai.
Droppables.add( element, options );Cú pháp cho remove () thậm chí còn đơn giản hơn. Phương thức remove () loại bỏ hành vi mục tiêu thả khỏi phần tử đã truyền.
Droppables.remove(element);Tùy chọn
Bạn có thể sử dụng một hoặc nhiều tùy chọn sau trong khi tạo đối tượng có thể kéo của mình.
| Lựa chọn | Sự miêu tả | Ví dụ |
|---|---|---|
| Hoverclass | Tên của lớp CSS sẽ được thêm vào phần tử trong khi có thể kéo xuống đang hoạt động (có thể kéo có thể chấp nhận được khi di chuột qua nó). Giá trị mặc định là null. | Thí dụ |
| Chấp nhận | Một chuỗi hoặc một mảng các chuỗi mô tả các lớp CSS. Trình có thể kéo xuống sẽ chỉ chấp nhận các trình kéo có một hoặc nhiều lớp CSS này. | Thí dụ |
| Chứa đựng | Chỉ định một phần tử hoặc một mảng các phần tử, phải là phần tử cha của một mục có thể kéo để nó được mục tiêu thả chấp nhận. Theo mặc định, không có ràng buộc ngăn chặn nào được áp dụng. | Thí dụ |
| Chồng chéo | Nếu được đặt thành 'ngang' hoặc 'dọc', có thể kéo xuống sẽ chỉ phản ứng với một Draggable nếu nó chồng chéo hơn 50% theo hướng nhất định. Được sử dụng bởi Sortables, sẽ được thảo luận trong chương tiếp theo. | |
| tham | Nếu đúng (mặc định), nó sẽ ngừng di chuyển các tệp có thể kéo xuống khác, bên dưới tệp có thể kéo sẽ không được tìm kiếm. | Thí dụ |
Tùy chọn gọi lại
Ngoài ra, bạn có thể sử dụng bất kỳ hàm gọi lại nào sau đây trong tham số tùy chọn -
| Chức năng | Sự miêu tả | Ví dụ |
|---|---|---|
| onHover | Chỉ định chức năng gọi lại được kích hoạt khi một mục có thể kéo phù hợp di chuột qua mục tiêu thả. Được sử dụng bởi Sortables, sẽ được thảo luận trong chương tiếp theo. | |
| onDrop | Chỉ định một hàm gọi lại được gọi khi một phần tử có thể kéo phù hợp được thả vào mục tiêu thả. | Thí dụ |
Thí dụ
Ở đây, phần đầu tiên của ví dụ này tương tự như ví dụ trước của chúng tôi, ngoại trừ việc chúng tôi đã sử dụng hàm $ A () tiện dụng của Prototype để chuyển đổi danh sách nút của tất cả các phần tử <img> trong phần tử có id là draggables thành một mảng .
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) { new Draggable(item, {revert: true, ghosting: true}); }); Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem}); // Set drop area by default non cleared. $('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau: