JqueryUI - Có thể thả xuống

jQueryUI cung cấp droppable() để làm cho bất kỳ phần tử DOM nào có thể kéo xuống được tại một mục tiêu được chỉ định (mục tiêu cho các phần tử có thể kéo).

Cú pháp

Các droppable() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .droppable (tùy chọn) Phương thức

  • $ (selector, ngữ cảnh) .droppable ( "hành động", params) Phương pháp

$ (bộ chọn, ngữ cảnh) .droppable (tùy chọn) Phương thức

Các (tùy chọn) droppable phương pháp tuyên bố rằng một phần tử HTML có thể được sử dụng như là một yếu tố trong đó bạn có thể thả các yếu tố khác. Các tùy chọn tham số là một đối tượng mà xác định hành vi của các yếu tố liên quan.

Cú pháp

$(selector, context).droppable (options);

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

$(selector, context).droppable({option1: value1, option2: value2..... });

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 Chấp nhận
Tùy chọn này được sử dụng khi bạn cần kiểm soát phần tử có thể kéo nào được chấp nhận thả. Theo mặc định, giá trị của nó là *.

Option - accept

Tùy chọn này được sử dụng khi bạn cần kiểm soát phần tử có thể kéo nào được chấp nhận thả. Theo mặc định, giá trị của nó là* nghĩa là mọi mặt hàng đều được chấp nhận bằng cách có thể thả xuống.

Điều này có thể thuộc loại -

  • Selector - Loại này cho biết phần tử có thể kéo được chấp nhận.

  • Function- Một hàm gọi lại sẽ được gọi cho mỗi phần tử có thể kéo trên trang. Hàm này sẽ trả về true nếu phần tử có thể kéo được chấp nhận bởi có thể kéo.

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

Tùy chọn này là một Chuỗi đại diện cho một hoặc nhiều lớp CSS sẽ được thêm vào phần tử có thể kéo xuống khi một phần tử được chấp nhận (một trong những phần tử được chỉ ra trong options.accept ) đang được kéo. Theo mặc định, giá trị của nó làfalse.

Option - activeClass

Tùy chọn này là một Chuỗi đại diện cho một hoặc nhiều lớp CSS sẽ được thêm vào phần tử có thể kéo xuống khi một phần tử được chấp nhận (một trong những phần tử được chỉ ra trong options.accept ) đang được kéo. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 addClasses

Tùy chọn này khi được đặt thành false sẽ ngăn không cho lớp ui-droppable được thêm vào các phần tử có thể thả xuống. Theo mặc định, giá trị của nó làtrue.

Option - addClasses

Tùy chọn này khi được đặt thành false sẽ ngăn không cho lớp ui-droppable được thêm vào các phần tử có thể thả xuống. Theo mặc định, giá trị của nó làtrue. Điều này có thể được mong muốn như một sự tối ưu hóa hiệu suất khi gọi .droppable () init trên hàng trăm phần tử.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 tàn tật

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa tính năng có thể thả xuống. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa tính năng có thể giảm xuống, tức là vô hiệu hóa chuyển động của mục qua các phần tử được chỉ định và thả vào các phần tử đó. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 tham

Tùy chọn này được sử dụng khi bạn cần kiểm soát phần tử có thể kéo nào được chấp nhận để thả trên các phần tử có thể kéo được lồng vào nhau. Theo mặc định, giá trị của nó làfalse. Nếu tùy chọn này được đặt thành true , bất kỳ phần tử có thể nhỏ hơn nào sẽ không nhận được phần tử.

Option - greedy

Tùy chọn này được sử dụng khi bạn cần kiểm soát phần tử có thể kéo nào được chấp nhận để thả trên các phần tử có thể kéo được lồng vào nhau. Theo mặc định, giá trị của nó làfalse. Nếu tùy chọn này được đặt thành true , bất kỳ phần tử có thể nhỏ hơn nào sẽ không nhận được phần tử.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

Tùy chọn này là Chuỗi đại diện cho một hoặc nhiều lớp CSS sẽ được thêm vào phần tử của droppable khi một phần tử được chấp nhận (một phần tử được chỉ ra trong options.accept ) di chuyển vào đó. Theo mặc định, giá trị của nó làfalse.

Option - hoverClass

Tùy chọn này là Chuỗi đại diện cho một hoặc nhiều lớp CSS sẽ được thêm vào phần tử của droppable khi một phần tử được chấp nhận (một phần tử được chỉ ra trong options.accept ) di chuyển vào đó. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 phạm vi

Tùy chọn này được sử dụng để hạn chế hành động có thể kéo xuống của các phần tử có thể kéo chỉ cho các mục có cùng tùy chọn.scope (được định nghĩa trong có thể kéo (tùy chọn)). Theo mặc định, giá trị của nó là"default".

Option - scope

Tùy chọn này được sử dụng để hạn chế hành động có thể kéo xuống của các phần tử có thể kéo chỉ cho các mục có cùng tùy chọn.scope (được định nghĩa trong có thể kéo (tùy chọn)). Theo mặc định, giá trị của nó là"default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
số 8 lòng khoan dung

Tùy chọn này là một Chuỗi chỉ định chế độ nào sẽ sử dụng để kiểm tra xem liệu một người có thể kéo có di chuột qua một thiết bị có thể kéo xuống hay không. Theo mặc định, giá trị của nó là"intersect".

Option - tolerance

Tùy chọn này là một Chuỗi chỉ định cách phần tử có thể kéo sẽ bao phủ phần tử có thể kéo xuống để thả được chấp nhận. Theo mặc định, giá trị của nó là"intersect". Giá trị có thể là -

  • fit - Draggable bao gồm đầy đủ phần tử có thể nhỏ giọt.

  • intersect - Draggable chồng lên phần tử có thể kéo xuống ít nhất 50% theo cả hai hướng.

  • pointer - Con trỏ chuột chồng lên phần tử có thể thả xuống.

  • touch - Có thể kéo chồng lên có thể kéo xuống bất kỳ mức độ nào khi chạm vào.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng thả.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng có thể kéo xuống, không chuyển tham số nào cho droppable() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Sử dụng addClass, bị vô hiệu hóa và dung sai

Ví dụ sau minh họa việc sử dụng ba tùy chọn (a) addClass (b) disabled và (c) tolerance trong chức năng thả của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Bây giờ thả phần tử trên "Tolerance Touch!" (chỉ cần chạm vào cạnh của hộp này) và xem các thay đổi của phần tử đích. Bây giờ để thả phần tử trên "Tolerance Fit!" mục tiêu, phần tử có thể kéo phải hoàn toàn chồng lên phần tử mục tiêu, tức là "Tolerance Fit!" Mục tiêu.

Chọn các phần tử sẽ bị loại bỏ

Ví dụ sau minh họa việc sử dụng tùy chọn accept và scope trong chức năng kéo của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>

      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();

            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });

            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
				
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>

         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>

         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>

         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
         
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>

         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ bạn có thể chơi với đầu ra -

Tại đây, bạn có thể thấy rằng bạn có thể loại bỏ phần tử "Người đến từ Nhật Bản" trên chỉ mục tiêu "Nhật Bản" và phần tử "Người đến từ Ấn Độ" trên mục tiêu Ấn Độ. Tương tự, phạm vi cho "Những người muốn học Java" được đặt thành "Java" và "Những người muốn học Mùa xuân" được đặt thành "Mục tiêu mùa xuân".

Quản lý ngoại hình

Ví dụ sau minh họa việc sử dụng các tùy chọn activeClass và hoverClass của lớp JqueryUI, giúp chúng ta quản lý diện mạo.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Bạn có thể nhận thấy rằng khi kéo hoặc di chuột (qua mục tiêu) của phần tử "Kéo tôi đến mục tiêu của tôi", sẽ thay đổi màu của phần tử mục tiêu "Thả vào đây".

Phương thức $ (selector, context) .droppable ("action", params)

Các droppable ( "hành động", params) phương pháp có thể thực hiện một hành động trên các yếu tố droppable, chẳng hạn như ngăn chặn chức năng droppable. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "vô hiệu hóa" để ngăn việc giảm). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

$(selector, context).droppable ("action", params);;

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại

Hành động này sẽ phá hủy hoàn toàn chức năng có thể tải xuống của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Action - destroy

Hành động này sẽ phá hủy hoàn toàn chức năng có thể tải xuống của một phần tử. Các phần tử trở lại trạng thái pre-init của chúng.

Syntax

$( ".selector" ).droppable("destroy");
2 vô hiệu hóa

Hành động này vô hiệu hóa hoạt động có thể thả xuống. Các phần tử không còn là phần tử có thể giảm xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này vô hiệu hóa hoạt động có thể thả xuống. Các phần tử không còn là phần tử có thể giảm xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).droppable("disable");
3 kích hoạt

Hành động này kích hoạt lại hoạt động có thể thả xuống. Các phần tử lại có thể nhận một phần tử có thể thả xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này kích hoạt lại hoạt động có thể thả xuống. Các phần tử lại có thể nhận một phần tử có thể thả xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).droppable("enable");
4 Lựa chọn

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể thả xuống hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - option

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể thả xuống hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var options = $( ".selector" ).droppable( "option" );
5 option (optionName)

Hành động này nhận giá trị của phần tử có thể kéo xuống hiện được liên kết với optionName được chỉ định . Điều này nhận một giá trị Chuỗi làm đối số.

Action - option( optionName )

Hành động này nhận giá trị của phần tử có thể kéo xuống hiện được liên kết với optionName được chỉ định . Điều này nhận một giá trị Chuỗi làm đối số.

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 option (optionName, value)

Hành động này đặt giá trị của tùy chọn có thể kéo xuống được liên kết với Tên tùy chọn được chỉ định .

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn có thể kéo xuống được liên kết với Tên tùy chọn được chỉ định . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho có thể thả xuống. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho có thể thả xuống. Các tùy chọn đối số là một bản đồ của các cặp tùy chọn-giá trị được đặt.

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
số 8 phụ tùng

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể kéo xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể kéo xuống. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var widget = $( ".selector" ).droppable( "widget" );

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng phương thức hủy () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Nếu bạn thả "drag1" vào bất kỳ phần tử nào có tên "drop here", bạn sẽ nhận thấy rằng phần tử này bị thả và hành động này phá hủy hoàn toàn chức năng có thể kéo xuống của một phần tử. Bạn không thể thả lại "drag2" và "drag3" trên phần tử này.

Quản lý sự kiện trên các phần tử có thể thả xuống

Ngoài phương thức có thể thả xuống (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử có thể kéo được chấp nhận bắt đầu kéo. Điều này có thể hữu ích nếu bạn muốn làm cho thiết bị có thể thả xuống "sáng lên" khi nó có thể được thả xuống.

Event - activate(event, ui)

Sự kiện này được kích hoạt khi phần tử có thể kéo được chấp nhận bắt đầu kéo. Điều này có thể hữu ích nếu bạn muốn làm cho thiết bị có thể thả xuống "sáng lên" khi nó có thể được thả xuống. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • draggable - Một đối tượng jQuery đại diện cho phần tử có thể kéo.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được kéo.

  • position - Vị trí CSS hiện tại của trình trợ giúp có thể kéo dưới dạng đối tượng {top, left}.

  • offset - Vị trí bù hiện tại của trình trợ giúp có thể kéo là đối tượng {trên cùng, bên trái}.

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi một phần tử có thể thả xuống được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - create(event, ui)

Sự kiện này được kích hoạt khi một phần tử có thể thả xuống được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 hủy kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt khi có thể kéo được chấp nhận ngừng kéo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - deactivate(event, ui)

Sự kiện này được kích hoạt khi có thể kéo được chấp nhận ngừng kéo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng và các loại có thể là -

  • draggable - Một đối tượng jQuery đại diện cho phần tử có thể kéo.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được kéo.

  • position - Vị trí CSS hiện tại của trình trợ giúp có thể kéo dưới dạng đối tượng {top, left}.

  • offset - Vị trí bù hiện tại của trình trợ giúp có thể kéo là đối tượng {trên cùng, bên trái}.

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop (sự kiện, ui)

Hành động này được kích hoạt khi một phần tử được thả trên thiết bị có thể thả xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - drop(event, ui)

Hành động này được kích hoạt khi một phần tử được thả trên thiết bị có thể thả xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng và các loại có thể là -

  • draggable - Một đối tượng jQuery đại diện cho phần tử có thể kéo.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được kéo.

  • position - Vị trí CSS hiện tại của trình trợ giúp có thể kéo dưới dạng đối tượng {top, left}.

  • offset - Vị trí bù hiện tại của trình trợ giúp có thể kéo là đối tượng {trên cùng, bên trái}.

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 out (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử có thể kéo được chấp nhận được kéo ra khỏi có thể kéo xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - out(event, ui)

Sự kiện Thi được kích hoạt khi một phần tử có thể kéo được chấp nhận được kéo ra khỏi phần có thể kéo xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 kết thúc (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử có thể kéo được chấp nhận được kéo qua có thể kéo xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - over(event, ui)

Sự kiện này được kích hoạt khi phần tử có thể kéo được chấp nhận được kéo qua có thể kéo xuống. Điều này dựa trên tùy chọn dung sai . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng. Và các loại có thể là -

  • draggable - Một đối tượng jQuery đại diện cho phần tử có thể kéo.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được kéo.

  • position - Vị trí CSS hiện tại của trình trợ giúp có thể kéo dưới dạng đối tượng {top, left}.

  • offset - Vị trí bù hiện tại của trình trợ giúp có thể kéo là đối tượng {trên cùng, bên trái}.

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong chức năng thả. Ví dụ này minh họa việc sử dụng các sự kiện thả , qua và hết .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
					
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dropexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Tại đây, bạn sẽ nhận thấy thông báo trong phần tử có thể thả xuống thay đổi như thế nào khi bạn kéo phần tử.

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