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.

  • Nếu nó được gán một số nguyên x, bộ kéo sẽ gắn vào một lưới x pixel.

  • Nếu một mảng [x, y], kéo ngang sẽ gắn vào lưới x pixel và dọc sẽ gắn vào y pixel.

  • Nó cũng có thể là một hàm tuân theo Hàm (x, y, có thể kéo) trả về một mảng [x, y].

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:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved