script.aculo.us - Phần tử sắp xếp

Nhiều khi, bạn cần cung cấp cho người dùng khả năng sắp xếp lại thứ tự các phần tử (chẳng hạn như các mục trong danh sách) bằng cách kéo chúng.

Nếu không có thao tác kéo và thả, việc sắp xếp lại thứ tự có thể là một cơn ác mộng, nhưng script.aculo.us cung cấp hỗ trợ sắp xếp lại thứ tự mở rộng thông qua lớp Sortable . Phần tử trở thành Có thể sắp xếp được chuyển đến phương thức create () trong không gian tên Có thể sắp xếp.

Một Sortable bao gồm các phần tử mục trong một phần tử vùng chứa. Khi bạn tạo một Sortable mới, nó sẽ đảm nhận việc tạo các Draggables và Droppables tương ứng .

Để sử dụng khả năng Sắp xếp của script.aculo.us, bạn sẽ 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ẽ như thế này -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Cú pháp có thể sắp xếp

Đây là cú pháp của phương thức create () để tạo một mục có thể sắp xếp. Phương thức create () lấy id của một phần tử vùng chứa và sắp xếp chúng dựa trên các tùy chọn đã chuyển.

Sortable.create('id_of_container',[options]);

Sử dụng Sortable.destroy để loại bỏ hoàn toàn tất cả các trình xử lý sự kiện và các tham chiếu đến một Sortable được tạo bởi Sortable.create.

NOTE- Một lệnh gọi đến Sortable.create, ngầm định gọi Sortable.destroy nếu phần tử được tham chiếu đã là một Sortable. Đây là cú pháp đơn giản để gọi hàm hủy.

Sortable.destroy( element );

Tùy chọn có thể sắp xếp

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ể sắp xếp của mình.

Sr.No Tùy chọn & Mô tả
1

tag

Chỉ định loại của các phần tử trong vùng chứa có thể sắp xếp được có thể sắp xếp thông qua kéo và thả. Mặc định là 'li'.
2

only

Chỉ định tên lớp CSS hoặc mảng tên lớp mà mục có thể kéo phải có để được mục tiêu thả chấp nhận. Điều này tương tự như tùy chọn chấp nhận của Draggable. Theo mặc định, không có ràng buộc tên lớp nào được áp dụng.
3

overlap

Một trong những sai, ngang hoặc dọc . Kiểm soát thời điểm kích hoạt sắp xếp lại. Mặc định là dọc .
4

constraint

Một trong những sai, ngang hoặc dọc . Hạn chế chuyển động của các phần tử có thể sắp xếp được kéo. Mặc định là dọc .
5

containment

Cho phép kéo và thả giữa các Bảng sắp xếp. Lấy một mảng các phần tử hoặc id phần tử. Lưu ý quan trọng: Để đảm bảo rằng có thể kéo hai chiều giữa các vùng chứa, hãy đặt tất cả các lệnh gọi Sortable.create sau các phần tử vùng chứa.
6

handle

Giống như tùy chọn Draggable cùng tên, chỉ định một phần tử được sử dụng để bắt đầu các hoạt động kéo. Theo mặc định, mỗi phần tử là một xử lý riêng của nó.
7

hoverclass

Chỉ định tên lớp CSS sẽ được áp dụng cho các phần tử có thể sắp xếp không kéo khi phần tử được kéo đi qua chúng. Theo mặc định, không có tên lớp CSS nào được áp dụng.
số 8

ghosting

Tương tự như tùy chọn Draggable cùng tên, If true, tùy chọn này khiến phần tử gốc của thao tác kéo giữ nguyên vị trí trong khi bản sao nửa trong suốt của phần tử được di chuyển cùng với con trỏ chuột. Giá trị mặc định là false . Tùy chọn này không hoạt động với IE.
9

dropOnEmpty

Nếu đúng, nó cho phép đưa các phần tử có thể sắp xếp vào một danh sách trống. Giá trị mặc định là false .
10

scroll

Nếu vùng chứa có thể sắp xếp sở hữu thanh cuộn do cài đặt thuộc tính tràn CSS, tùy chọn này cho phép tự động cuộn danh sách ngoài các phần tử hiển thị. Giá trị mặc định là false .
12

scrollSensitivity

Khi kích hoạt tính năng cuộn, nó sẽ điều chỉnh thời điểm kích hoạt cuộn. Mặc định là 20.
13

scrollSpeed

Khi tính năng cuộn được bật, nó sẽ điều chỉnh tốc độ cuộn. Mặc định là 15.
14

tree

Nếu đúng, nó cho phép sắp xếp với các phần tử con trong phần tử có thể sắp xếp. Giá trị mặc định là false.
15

treeTag

Nếu tùy chọn cây được bật, nó sẽ chỉ định loại phần tử vùng chứa của phần tử con mà phần tử con của chúng tham gia vào hành vi có thể sắp xếp. Mặc định là 'ul'.

Bạn có thể cung cấp các lệnh gọi lại sau trong tham số tùy chọn:

Sr.No Tùy chọn & Mô tả
1

onChange

Một hàm sẽ được gọi bất cứ khi nào thứ tự sắp xếp thay đổi trong khi kéo. Khi kéo từ Có thể sắp xếp này sang Có thể sắp xếp khác, lệnh gọi lại được gọi một lần trên mỗi Có thể sắp xếp. Lấy phần tử bị ảnh hưởng làm tham số của nó.
2

onUpdate

Một hàm sẽ được gọi khi kết thúc thao tác kéo dẫn đến thay đổi thứ tự phần tử.

Sắp xếp Ví dụ

Bản demo này đã được xác minh là hoạt động trong IE 6.0. Nó cũng hoạt động trong phiên bản mới nhất của Firefox.

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>
   
   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

Sử dụng trình biên dịch trực tuyến của chúng tôi để hiểu rõ hơn về mã với các tùy chọn khác nhau được thảo luận trong bảng trên.

Điều này sẽ tạo ra kết quả sau:

Lưu ý việc sử dụng thẻ: 'li' . Tương tự, bạn có thể sắp xếp danh sách hình ảnh có sẵn sau đây trong <div> -

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Sắp xếp thứ tự các yếu tố có thể sắp xếp

Đối tượng Sortable cũng cung cấp một hàm Sortable.serialize () để sắp xếp thứ tự cho Sortable ở định dạng phù hợp với các yêu cầu HTTP GET hoặc POST. Điều này có thể được sử dụng để gửi thứ tự của Sắp xếp thông qua một cuộc gọi Ajax.

Cú pháp

Sortable.serialize(element, options);

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ể sắp xếp của mình.

Sr.No Tùy chọn & Mô tả
1

tag

Đặt loại thẻ sẽ được tuần tự hóa. Điều này sẽ tương tự như những gì được sử dụng trong Sortable.create .
2

name

Đặt tên của khóa sẽ được sử dụng để tạo các cặp khóa / giá trị để tuần tự hóa ở định dạng HTTP GET / POST. Vì vậy, nếu tên là xyz, chuỗi truy vấn sẽ giống như sau:

xyz [] = value1 & xyz [] = value2 & xyz [] = value3

Nơi các giá trị được lấy từ các phần tử con theo thứ tự xuất hiện trong vùng chứa.

Nối tiếp các ví dụ

Trong ví dụ này, đầu ra của tuần tự hóa sẽ chỉ cung cấp các số sau dấu gạch dưới trong ID mục danh sách.

Để thử, hãy để các danh sách theo thứ tự ban đầu, nhấn nút để xem tuần tự của các danh sách. Bây giờ, hãy sắp xếp lại một số phần tử và nhấp lại vào nút.

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' + $(container).id + 
            ' is: <br/><pre>' + 
               Sortable.serialize( container,{ name:name} ) + 
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>	
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>
			
      <button type = "button" value = "Click Me" 
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Di chuyển các mục giữa các bảng sắp xếp

Ví dụ sau đây cho thấy cách di chuyển các mục từ danh sách này sang danh sách khác.

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>		
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

Lưu ý rằng tùy chọn chứa cho mỗi vùng chứa liệt kê cả hai vùng chứa dưới dạng các phần tử ngăn chặn. Bằng cách đó, chúng tôi đã cho phép các phần tử con được sắp xếp trong ngữ cảnh của phần tử gốc của chúng; Nó cũng cho phép chúng được di chuyển giữa hai thùng chứa.

Chúng tôi đặt dropOnEmpty thành true cho cả hai danh sách. Để xem tác dụng của tùy chọn này đối với danh sách đó, hãy di chuyển tất cả các phần tử từ danh sách này sang danh sách khác để một danh sách trống. Bạn sẽ thấy rằng nó cho phép thả phần tử vào danh sách trống.

Điều này sẽ tạo ra kết quả sau:

Ràng buộc với Ajax

Tất nhiên, onUpdate là một ứng cử viên chính để kích hoạt thông báo Ajax tới máy chủ, ví dụ: khi người dùng sắp xếp lại danh sách việc cần làm hoặc một số tập dữ liệu khác. Việc kết hợp Ajax.Request và Sortable.serialize làm cho việc duy trì hoạt động trở nên đủ đơn giản -

<html>
   <head>
      <title>Sorting 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() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request 
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize tạo ra một chuỗi như: List [] = 1 & List [] = 2 & List [] = 3 & List [] = 4, trong đó các số là phần định danh của id phần tử danh sách sau dấu gạch dưới.

Bây giờ chúng ta cần viết mã file.php , nó sẽ phân tích dữ liệu đã đăng dưới dạng parse_str ($ _ POST ['data']); và bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu được sắp xếp này.

Để tìm hiểu thêm về AJAX, vui lòng xem qua Hướng dẫn Ajax đơn giản của chúng tôi .

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