Main.-Tốt để biết-Loại bỏ, thay thế và chuyển động các phần tử trong jQuery. Kéo và thả các phần tử (kéo và thả)

Loại bỏ, thay thế và chuyển động các phần tử trong jQuery. Kéo và thả các phần tử (kéo và thả)

Bài học này giải quyết các vấn đề về thao tác các yếu tố hiện có trên trang:

  • Loại bỏ Các phần tử từ trang bằng các phương thức trống () , tẨY () , tách ra () và unrap ()
  • Thay thế các yếu tố với các yếu tố mới bằng cách sử dụng các phương thức thay bằng () và tHAY THẾ TẤT CẢ ()
  • Di chuyển. các phần tử từ phần tử cha khác này sang yếu tố khác trên trang

Xóa các phần tử khỏi trang

Xóa mọi thứ bên trong phần tử: trống ()

Phương thức trống () là cách đơn giản nhất để xóa nội dung khỏi trang. Gọi phương thức trống () cho đối tượng jQuery sẽ loại bỏ tất cả các nội dung khỏi bộ tương ứng với phần tử (hoặc vật phẩm) trong đối tượng jQuery.

Nói cách khác, phương thức trống () xóa tất cả các yếu tố di truyền và các nút (như các nút văn bản) từ mỗi phần tử rơi vào bộ, để trống phần tử.

Ví dụ loại bỏ nội dung của hai yếu tố div:

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Sau khi hoàn tất mã trên, nội dung trang sẽ thay đổi thành:

Xóa toàn bộ phần tử: Xóa ()

Nếu phương thức trống () sẽ xóa mọi thứ bên trong phần tử, thì phương thức Remove () sẽ xóa mọi thứ, bao gồm cả chính phần tử. Ví dụ:

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Nút văn bản như nó là

sau khi hoàn tất mã trên, cả hai phần tử div sẽ bị xóa khỏi trang:

Bạn có thể chuyển chuỗi bằng bộ chọn có điều kiện đến phương thức Remove (). Trong trường hợp này, các mục đã xóa sẽ được chọn bởi bộ chọn. Ví dụ:

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Nút văn bản như nó là

Trong ví dụ trên, chỉ phần tử div sẽ bị xóa mà lớp Xóa được cài đặt. và Chứa văn bản "đoạn khác". Mọi thứ khác sẽ vẫn còn trên trang:

Đoạn văn với văn bản

Xóa một mục mà không phá hủy dữ liệu của nó: Detach ()

Xóa () Trả về đối tượng jQuery, chứa các phần tử từ xa. Về mặt lý thuyết, bạn có thể xóa bất kỳ mục nào từ một nơi trên trang và sau đó tham gia cùng chúng ở bất cứ đâu ..

Tuy nhiên, để tiết kiệm tài nguyên và tránh một vấn đề tiềm ẩn với rò rỉ bộ nhớ, phương thức Remove () sẽ xóa tất cả dữ liệu và sự kiện jQuery được liên kết với phần tử từ xa. Ví dụ: nếu sự kiện JQuery Click được gán một phần tử, sau đó, mục đã bị xóa khỏi trang bằng phương thức Xóa, sự kiện nhấp sẽ bị xóa khỏi mục. Điều này có thể gây ra sự cố nếu sau này bạn muốn trả lại hàng Quay lại trang và khôi phục chức năng của nó.

Trong trường hợp này, phương thức Detach () có thể giúp (xuất hiện trong jQuery 1.4). Nó hoạt động gần như phương thức Remove (), ngoại trừ một - anh ta không xóa Dữ liệu và sự kiện jQuery được liên kết với một phần tử từ xa. Điều này có nghĩa là sau này bạn có thể gắn lại các mục từ xa trong khi duy trì siêu dữ liệu jQuery của họ.

Thí dụ. Tập lệnh sau gán cho sự kiện JQuery Click cho mỗi hai đoạn trên trang. Cả hai trình xử lý sự kiện chỉ cần chuyển đổi lớp CSS "màu đỏ" sang đoạn để thay đổi màu từ màu đỏ trên Đen hoặc Quay lại mỗi lần nhấn.

Script sau đó xóa đoạn đầu tiên khỏi trang bằng phương thức Remove () và lưu trữ đối tượng jQuery, trong đó chứa một đoạn trong biến MyDIV1PARA. Sau đó đính kèm đoạn văn vào DIV cha mẹ bằng phương thức appendto ().

Chúng tôi cũng làm tương tự với đoạn thứ hai, chỉ sử dụng phương thức Detach () thay vì phương thức Remove ().

<

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Sau khi thực hiện tập lệnh này, đoạn đầu tiên sẽ mất trình xử lý sự kiện nhấp chuột và đoạn thứ hai sẽ giữ lại đầy đủ chức năng của nó. Bạn có thể kiểm tra bằng cách mở trang trong trình duyệt. Nếu bạn nhấn nút chuột trên đoạn thứ hai, nó sẽ thay đổi màu sắc và đầu tiên sẽ không phản ứng với các hành động của chuột.

Điều này là do phương thức Remove () đã dẫn đến việc xóa một trình xử lý sự kiện cho đoạn đầu tiên và phương thức tách () đã lưu trình xử lý sự kiện nhấp vào đoạn thứ hai.

Xóa phần tử cha: unrap ()

Phương thức Unwrap () sẽ xóa phần tử cha (hoặc phụ huynh của bộ phần tử) khỏi DOM. Phần tử sẽ thay thế phần tử cha trong DOM.

Ví dụ sau mở ra nội dung của div. Một từ khác được thay thế bằng div nội dung của nó:

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Sau khi thực hiện đoạn mã trên, nội dung trang sẽ lấy mẫu sau:

Đoạn văn với văn bản

Một đoạn văn khác với văn bản

Thay thế các yếu tố

Thay thế phần tử bằng nội dung mới: thay thế ()

Phương thức thay thế () cho phép bạn thay thế vật phẩm hoặc tập hợp các phần tử bằng nội dung mới. Bạn có thể truyền đạt nội dung thay thế trong bất kỳ hình thức nào sau đây:

  • Yếu tố đối tượngđược tạo bằng chức năng JavaScript DOM, chẳng hạn như tài liệu.GelementById () hoặc document.createase ()
  • Chuỗi htmlđại diện cho nội dung thay thế
  • Đối tượng jQuerychứa một phần tử (hoặc các phần tử) được sử dụng để thay thế
  • Chức năng trở vềMà phải trả về mã HTML thay thế

Dưới đây là một ví dụ hiển thị phương thức thay thếWith () trong hành động. Đoạn đầu tiên được thay thế bằng chuỗi HTML mới, đoạn thứ hai được thay thế bằng đối tượng của phần tử và đoạn thứ ba được thay thế bằng kết quả của hàm trả về thời gian hiện tại:

Đoạn văn với văn bản

Đoạn văn với văn bản

Đoạn văn với văn bản

Sau khi thực hiện mã, nội dung của trang sẽ lấy mẫu:

Đoạn mới với văn bản

Giờ hiện tại: 13:52:17

Thay thếL (): thay thế để thay thế ()

Phương thức thay thếL () thực hiện một cách nghiêm túc của dịch vụ mà phương thức thay thếWith () là, thay vì gửi nội dung thay thế dưới dạng đối số, bạn cần chuyển mục sẽ phải được thay thế.

Ví dụ: 2 dòng mã sau đây làm cho cùng một điều:

$ ("# mydiv"). Thay thế ("

Đây là một văn bản mới

"); $("

Đây là một văn bản mới

") .replacealll (" # mydiv ");

Các yếu tố di chuyển.

Bây giờ bạn biết cách xóa và thay thế các mục. Câu hỏi vẫn mở: Làm thế nào để di chuyển các mục trên cây DOM? Ví dụ: có một đoạn trong phần tử div và bạn cần di chuyển nó sang một div khác.

Mặc dù thực tế là trong jQuery thì không có phương pháp đặc biệt nào để di chuyển các yếu tố gỗ DOM, trong thực tế, nó rất dễ thực hiện. Tất cả những gì bạn cần làm là làm nổi bật các phần tử mà bạn muốn di chuyển; Sau đó gọi phương thức "bổ sung", ví dụ: append (), appendto () hoặc updend () để thêm một mục chuyên dụng cho một yếu tố cha mẹ khác. JQuery tự động nhận ra rằng (các) phần tử đã tồn tại trên trang và di chuyển nó đến một phụ huynh mới.

Một ví dụ tái tạo quy trình được mô tả. Đoạn văn di chuyển từ đầu tiên div. Trong giai đoạn thứ hai:

Đoạn văn với văn bản

Sau khi mã được thực thi, trang sẽ lấy mẫu sau:

Đoạn văn với văn bản

Và đây là một cách khác để di chuyển yếu tố:

// di chuyển đoạn từ # mydiv1 sang # mydiv2 $ ("# mydiv1\u003e p"). Appendto ($ ("# mydiv2")); // thấm vào đoạn từ # mydiv1 in # mydiv2 var para \u003d $ ("# mydiv1\u003e p"); Para.prependto ("# mydiv2"); // di chuyển đoạn văn từ # mydiv1 in # mydiv2 // sử dụng sự ngắt kết nối rõ ràng của nó và thêm nó vào một địa điểm mới $ ("# mydiv1\u003e p"). Tách (). Exptendo ("# mydiv2");

Một ví dụ chứng minh một kỹ thuật jQuery rất hữu ích - sự ràng buộc của các phương thức. Vì hầu hết các phương thức jQuery trả về các đối tượng, bạn có thể gọi một phương thức khác cho đối tượng được trả về. Những gì lần lượt sẽ dẫn đến sự trở lại của đối tượng jQuery tiếp theo, v.v.

Vì vậy, trong ví dụ trên, đối tượng jQuery được trả về bằng phương thức tách (), được gọi để xóa đoạn văn. Và phương thức PREPENDTO () được gọi cho đối tượng trả về jQuery để thêm đoạn từ xa vào phần tử cha mẹ mới.

Điều gì xảy ra nếu bạn cố gắng di chuyển bất kỳ nội dung nào trong nhiều yếu tố cha mẹ cùng một lúc? Nếu bạn thực hiện, trước tiên, jQuery sẽ xóa nội dung khỏi cha mẹ cũ, sau đó sao chép nội dung nhiều lần khi bạn cần và thêm các bản sao vào từng yếu tố cha đã chỉ định. Ví dụ:

Đoạn văn với văn bản

Sau khi hoàn tất đoạn mã trên, nội dung của trang sẽ trông như thế này:

Đoạn văn với văn bản

Đoạn văn với văn bản

Tóm lược

Loại bỏ, thay thế và dịch chuyển nội dung là những khái niệm cơ bản cho phép bạn xây dựng các trang web dựa trên jQuery tuyệt vời.

Một chương khác từ cuốn sách "jQuery trong hành động" (tác giả của gấu bibeawult và yehuda katz). Trước hết, tôi xin lỗi những người đọc trong một khoảng thời gian rộng lớn như vậy giữa các ấn phẩm của chương. Nhưng vẫn vậy, tôi đã làm điều đó, tất nhiên, rất vui. Tôi hy vọng rằng bạn sẽ không thờ ơ quá. Vì vậy, chúng tôi bán.

Chương 3. Thu hút một trang với jQuery.

3.1. Thao tác các thuộc tính và thuộc tính của các đối tượng.

3.1.1. Thao tác với tính chất đối tượng.

Cách dễ nhất để kiểm tra hoặc thay đổi các mục của bộ JUE được chọn bởi chúng tôi cho phép chúng tôi chỉ huy mỗi ():

$ ('Img'). Mỗi (hàm (n) (
this.alt \u003d 'Hình ảnh này [' + n + '] với id bằng' + this.id;
});

Biểu thức này sẽ áp dụng chức năng được chỉ định cho từng phần tử. Trên trang, thuộc tính Alt sẽ được thay đổi bằng cách sử dụng số thứ tự của mục và ID của nó.

3.1.2, 3.1.3 Lấy và thay đổi các giá trị thuộc tính.

Như chúng ta đảm bảo, nhiều phương thức trong jQuery được sử dụng để đọc và ghi, tùy thuộc vào các thuộc tính và số lượng của chúng được truyền theo phương thức.

Do đó, phương thức Attr () có thể được sử dụng cả để nhận giá trị của các thuộc tính và để cài đặt của chúng. Nếu chỉ có tên thuộc tính được truyền, nó sẽ trả về giá trị của nó, ví dụ:

$ ("# MyImage"). Attr ("alt")

Vì vậy, chúng tôi nhận được ALT cho một phần tử có ID #MyImage.

$ ("# MyImage"). Attr ("alt", "MU Picture")

Như bạn có thể đoán, hãy cài đặt cùng một phần tử Alt "Ảnh của tôi".

Điều đáng chú ý là thay vì giá trị thuộc tính mới, bạn có thể truyền hàm vào phương thức này. Thí dụ:

$ ('*'). Atr (tiêu đề ', hàm (chỉ mục) (
Trả về 'Tôi là phần tử' + Chỉ mục + 'và tên của tôi là' +
(this.Id? cái này: 'không đặt');
});

Sự phức tạp này trong khi đối với chúng tôi, chức năng chạy qua tất cả các phần tử của quay số trên trang bằng cách thay đổi thuộc tính tiêu đề theo chỉ mục phần tử và ID của nó.

Hơn nữa, phương thức Attr () cho phép bạn thay đổi nhiều thuộc tính cùng một lúc:

$ ('Đầu vào'). Atr ((giá trị: '', tiêu đề: 'Vui lòng nhập giá trị'));

Theo cách này, chúng ta có thể xóa tất cả các giá trị đầu vào và cài đặt tiêu đề của chúng là "Vui lòng nhập giá trị".

3.1.4 Xóa các thuộc tính.

Để xóa thuộc tính tại phần tử DOM, trong jQuery, có một phương thức DROPEATTR () đặc biệt. Ví dụ:

$ ('Img'). Loại bỏ ('alt');

Vì vậy, chúng tôi xóa thuộc tính Alt từ tất cả các yếu tố IMG đã chọn.

3.2 Làm việc với các kiểu yếu tố.

3.2.1 Thêm và xóa tên lớp.

Định nghĩa của lớp được thực hiện rất đơn giản bằng cách sử dụng phương thức add class (), gán tên của lớp cho tất cả các phần tử trong tập hợp. Ví dụ:

$ ('Img'). Add class ('noborder');

Xóa một lớp được thực hiện bởi lệnh RemoveClass ():

$ ('Img'). Broweclass ('NOBORDER');

Phương pháp sau đây khá thú vị: toggleclass () gán một phần tử lớp trong một tập hợp, nếu lớp này chưa được xác định cho nó, và, ngược lại, hãy loại bỏ lớp của phần tử trong tập hợp, nếu lớp đã được gán .

Nó rất hữu ích để áp dụng một phương thức như vậy trong các bảng, ở đâu, giả sử, chúng ta cần thay đổi các dòng sơn màu trắng và trắng - trong sơn. Điều này được thực hiện như thế này:

$ ('Tr'). Toggleclass ('sọc');

Trong đó sọc là tên của lớp cho chuỗi sơn.

3.2.2 Bắt và lắp đặt kiểu.

Làm việc trực tiếp với phong cách mang lại cho chúng ta những cơ hội tuyệt vời.

Phương thức CSS () hoạt động tương tự như phương thức attr (), cho phép chúng ta đặt các thuộc tính riêng lẻ của CSS cho phần tử bằng cách chuyển phương thức thành một cặp giá trị tên hoặc thậm chí thay đổi nhiều thuộc tính bằng cách truyền các giá trị mới cho chúng trong đối tượng.

Hơn nữa, phương pháp này cũng xử lý hoàn hảo các hàm được truyền đến nó dưới dạng giá trị cho thuộc tính. Ví dụ: chúng ta sẽ tăng chiều rộng của các phần tử trong một bộ 20 pixel:

$ ('Div.expandable'). CSS ('chiều rộng', hàm () (
Trả lại $ (cái này) .width () + 20 + "px";
});

Ví dụ sau đây cho thấy khả năng chuyển phương thức nhóm tham số dưới dạng các đối tượng:

$ ('Div.example'). CSS ((chiều rộng: '100px', Chiều cao: '200px'));

Và cuối cùng, phương thức CSS () cho phép bạn lấy giá trị của tài sản được truyền theo phương thức. Ví dụ: bạn có thể tìm hiểu độ rộng của phần tử như thế này:

$ ('Div.examle'). CSS ('chiều rộng');

Đối với các thuộc tính được sử dụng thường xuyên trong jQuery có các lệnh đặc biệt. Vì vậy, chúng ta có thể học hoặc thay đổi chiều cao và chiều rộng của các đối tượng với các phương thức Chiều cao () và Chiều rộng (). Theo đó, nếu chúng tôi truyền phương thức giá trị - chúng tôi đặt giá trị này theo phương thức nhận được và nếu chúng tôi chỉ cần gọi phương thức - chúng tôi có được giá trị bạn cần (trong khi giá trị được truyền sẽ được cài đặt tính bằng pixel), đó là:

$ ('Div.example'). Chiều rộng (500)

Đặt chiều rộng của khối trong 500 pixel. Nhân tiện, điều này giống như

$ ('Div.example'). CSS ("Chiều rộng", "500px")

Bây giờ bạn có thể tìm ra chiều rộng khối như thế này:

$ ('Div.example'). Chiều rộng ()

3.2.3 Một số đội hữu ích hơn để làm việc với phong cách.

Đôi khi cần phải kiểm tra xem nó thuộc về một lớp cụ thể hay không. Làm cho nó sẽ giúp hàm HasClass ():

$ ('P: đầu tiên'). HasClass ('Supriseme')

Nếu bất kỳ phần tử nào trong bộ thuộc về lớp được chỉ định, hàm sẽ trả về TRUE.

3.3 Đặt nội dung của các mục.

3.3.1 Thay thế HTML hoặc văn bản.

Lệnh đơn giản nhất là HTML () - Trả về cho chúng tôi mã HTML của phần tử tương ứng đầu tiên nếu tham số không được chỉ định hoặc cài đặt một đoạn HTML, được truyền dưới dạng tham số có chứa bởi tất cả các mục đã chọn.

Ngoài ra, có thể chỉ có được nội dung văn bản của các yếu tố. Đối với điều này có một lệnh text ().



  • Số ba.

  • Bốn.

Var text \u003d $ ("# thelist '). Văn bản ();

Do đó, biến văn bản sẽ chứa chuỗi "onetwothreefour".

Như với tính năng trước đó, chúng ta có thể đặt nội dung văn bản cho phần tử nếu các hàm Test () sẽ là văn bản tham số cần thiết. Trong trường hợp này, nếu văn bản có nhân vật< или > Chúng sẽ được thay thế bằng đặc biệt.

Điều đáng chú ý là việc sử dụng hai lệnh này để đặt nội dung của các mục sẽ xóa nội dung trước đó, vì vậy hãy sử dụng các lệnh này một cách cẩn thận.

3.3.2 Di chuyển và sao chép các yếu tố.

Để thêm nội dung vào cuối lệnh append () hiện tại phục vụ.

Chức năng thêm một chuỗi hoặc một đoạn HTML được truyền đến nó dưới dạng tham số cho phần tử DOM mới hoặc hiện có hoặc tập hợp các phần tử jQuery lồng nhau. Xem xét một số ví dụ.

$ ("P"). Nối (" một số tiếp theo");

Biểu thức này sẽ đính kèm một đoạn HTML được tạo từ hàm chuỗi được truyền, vào cuối nội dung đã có sẵn của tất cả các mục

Trên trang.

Việc sử dụng toàn diện hơn của lệnh này cho phép bạn gán các phần tử DOM hiện có cho các phần tử khác. I E:

$ ("P.appendtome"). Appendme ($ ("a.appendme"))

Cho phép bạn gán tất cả các liên kết của lớp appendme bởi các yếu tố công ty con của tất cả

Ở bên cạnh lớp appendtome. Trong trường hợp này, vị trí cuối cùng của các yếu tố được gán phụ thuộc vào số lượng phần tử mục tiêu. Nếu đó, thì các mục có thể gán sẽ được di chuyển từ vị trí ban đầu của chúng trên trang, nếu các thành phần đích là nhiều, thì các mục được chỉ định sẽ vẫn ở vị trí riêng của chúng và các yếu tố mục tiêu sẽ được gán cho bản sao của chúng.

Để di chuyển hoặc sao chép một phần tử từ nơi này sang nơi khác, bạn cũng có thể sử dụng lệnh appendto (), di chuyển tất cả các phần tử của quay số lồng vào cuối nội dung của phần tử mục tiêu được chỉ định làm tham số chức năng. Chúng tôi tìm một ví dụ để xem sự khác biệt từ hàm trước:

$ ("A.appendme"). Appendto ($ ("p.appendtome"))

Là một mục tiêu, một lần nữa, cả bộ chọn và phần tử DOM có thể xuất hiện. Như trong hàm trước, nếu phần tử đích là một, thì chuyển động sẽ được thực hiện nếu các đối tượng mục tiêu là một số, sau đó sao chép sẽ được thực hiện.

Nguyên tắc hoạt động của các đội sau tương tự như công việc của Append () và AppendTo ():
Chuẩn bị () và erpendto () - chèn phần tử nguồn trước mục tiêu, và không sau đó.
Trước () và Chèn Before () - Chèn một phần tử vào các phần tử mục tiêu và không phải trước hậu duệ đầu tiên.
Sau () và chèn sau () - chèn một phần tử sau các phần tử đích và không sau hậu duệ cuối cùng.

Hãy xem xét ví dụ sau:

$(‘

Chào!

') .IntertAfter (' p img ');

Biểu thức này sẽ tạo một đoạn mới và chèn các bản sao sau mỗi bản vẽ bên trong đoạn văn.

3.3.3 Các yếu tố đầu tư

Một loại thao tác DOM khác, mà chúng ta thường đề cập đến việc nhúng này các phần tử (hoặc nhóm các phần tử) cho một số yếu tố khác. Ví dụ: chúng tôi muốn đặt tất cả các tham chiếu của một lớp nhất định bên trong
. Bạn có thể làm điều này với lệnh Wrap (). Phương thức này đặt tập hợp các phần tử đã chọn bên trong mã HTML được truyền hoặc bản sao của phần tử được truyền.

$ ("A.surprise"). Bọc ("

”);

$ ("A.surprise"). Gói ($ ("DIV: đầu tiên"));

Phải làm gì nếu chúng ta cần đặt tất cả các mục đã chọn chứ không phải từng cái một, nhưng cùng nhau trong một số thùng chứa chung? Điều này sẽ giúp hàm Wrapall ().

Chà, khi chúng ta muốn đặt một thùng chứa trong thùng chứa, bạn cần, không phải mọi yếu tố, mà chỉ có nội dung của nó - sử dụng hàm WrapInner ().

3.3.4 Loại bỏ các yếu tố

Nếu chúng ta muốn xóa hoặc xóa một tập hợp các phần tử, bạn dễ thực hiện với lệnh Remove (), loại bỏ tất cả các phần tử của bộ được nhúng từ DOM trên trang.

Cần lưu ý rằng, giống như nhiều lệnh jQuery khác, kết quả của lệnh này một lần nữa là một tập hợp các phần tử. Và hãy để chúng tôi loại bỏ nó khỏi DOM, chúng tôi vẫn có thể sử dụng nó thêm trong các chức năng khác, ví dụ, cùng một phần mềm () hoặc chèn sau () hoặc tương tự khác.

Để xóa các mục khỏi nội dung của chúng, bạn có thể sử dụng lệnh rỗng (). Nó loại bỏ nội dung của tất cả các phần tử DOM trong bộ.

Việc sử dụng Remove () và sau () được phân phối cho hoạt động thay thế. Điều này được thực hiện theo cách này:

$ ('Div.elementtoreplace'). Sau ('

Tôi thay thế khối

') .Tẩy ();

Kể từ sau () trả về phần tử nguồn

, chúng ta chỉ cần loại bỏ nó, chỉ để lại một đoạn mới

Nếu bạn thích ý tưởng, bạn có thể tinh chỉnh nó và viết chức năng sau:

$ .fn.replacewith \u003d hàm (html) (
Trả lại cái này. Sau đó (html) .remove ();
}

Sau đó, chúng tôi sẽ thực hiện các hoạt động trước đó:

$ ('Div.elementtoreplace'). Thay thế ('

Tôi thay thế khối

’);

Và phải làm gì khi chúng ta muốn không di chuyển các yếu tố, mà chỉ sao chép? ..

3.3.5 Các yếu tố nhân bản

Để làm điều này, bạn có một lệnh clone () trong jQuery. Nó tạo và trả về một bản sao của bộ. Tất cả các mục và hậu duệ được sao chép. Với tham số TRUE được truyền, tất cả các trình xử lý cũng được sao chép.

Các yếu tố nhân bản là không hiệu quả cho đến khi chúng ta làm một cái gì đó với một bản sao. Tất cả phụ thuộc vào tưởng tượng của chúng tôi. Đây là một vài ví dụ:

$ ('Img'). Clone (). Appendto ('fieldset .photo');

Biểu thức này tạo một bản sao của tất cả các hình ảnh và đặt chúng trong tất cả các yếu tố.

Lớp ảnh.

Một ví dụ nữa:

$ ('Ul'). Clone (). Chèn Before ('# ở đây');

Thực hiện một hoạt động tương tự. Điều đáng chú ý là tất cả các yếu tố được nhân bản.

    , bao gồm cả hậu duệ của họ
  • (Tất nhiên, nếu vậy, là).

    Và ví dụ cuối cùng:

    $ ('Ul'). Clone (). Chèn Before ('# ở đây'). End (). Ẩn ();

    Biểu thức này tương tự như hoạt động trước đó, nhưng sau khi chèn một bản sao, lệnh end () sẽ chọn bộ gốc, sau đó nó bị ẩn bởi lệnh ẩn ().

    3.4 Hoạt động với các yếu tố mẫu

    Các hành động chính được thực hiện với các hình thức là hoạt động với dữ liệu của họ. Lệnh val () trả về nội dung của thuộc tính giá trị phần tử đầu tiên trong bộ. Khi phần tử biểu mẫu chứa một số tùy chọn lựa chọn, mảng các giá trị của tất cả các tùy chọn này được trả về.

    Đội này, mặc dù khá hữu ích, có một số hạn chế. Nếu phần tử đầu tiên của tập hợp không phải là phần tử của biểu mẫu - chúng tôi sẽ nhận được thông báo lỗi. Ngoài ra, lệnh này không phân biệt các phần tử được đánh dấu và không được đánh dấu các hộp kiểm hoặc RadioBatons.

    Đối với một trường hợp có đài phát thanh, bạn có thể làm như sau:

    $ (': Đã kiểm tra'). Val ()

    Biểu thức này sẽ trả về giá trị của radiobate được chọn duy nhất có tên Radiogroup (hoặc trả về giá trị không xác định. Nếu không có đài phát thanh được chọn). Ví dụ này không thể được áp dụng cho các hộp kiểm, vì ở đây có thể có nhiều hơn một giá trị được chọn và như đã đề cập, Val () trả về nội dung thuộc tính giá trị của phần tử đầu tiên trong bộ.

    Khi chuyển lệnh tham số, nó sẽ được đặt dưới dạng giá trị cho giá trị tất cả các phần tử được cài đặt được chọn. Đồng thời, một lần nữa có một số hạn chế. Ví dụ: bạn không thể cài đặt một số giá trị cho một phần tử có nhiều lựa chọn.

    Một hướng khác sử dụng Val () là cài đặt các hộp kiểm của Chekboxers và Radibatons hoặc tùy chọn tùy chọn và Onclick \u003d "$ (" # divl "). Rỗng ();"\u003e
    Onclick \u003d "$ (" # divl1 "). HTML (" Văn bản mới “) ;” >

    Như có thể thấy từ ví dụ, sau khi xóa nội dung của phần tử bằng mã định danh Divl, phần tử vẫn có sẵn để thao tác.

    Xóa ([Bộ chọn]) - Loại bỏ hoàn toàn các mục khỏi mô hình đối tượng của tài liệu.

    Yếu tố này sẽ được loại bỏ hoàn toàn.
    Onclick \u003d "$ (" # divl1 "). Xóa ();"\u003e
    Onclick \u003d "Alert ($ # Divl"). Kích thước ()); "\u003e

    Ví dụ này chứng minh sự vắng mặt của một phần tử sau khi nhấp vào nút Xóa. Bằng cách nhấp vào số lượng vật phẩm lần đầu tiên trên nút, chúng tôi có được số 1 và nếu bạn nhấp vào nó sau khi xóa mục, thì chúng tôi sẽ có được số 0.

    Nếu bộ sưu tập bao gồm nhiều hơn một phần tử, tất cả các phần tử sẽ bị xóa. Phương thức Remove () cho phép bạn chỉ định điều kiện bổ sung mà các mục đã xóa phải khớp. Ví dụ, xóa tất cả các liên kết với phần mở rộng. PHP.

    $ ("A"). Tẩy (");

    Thay đổi nội dung của các yếu tố

    Để có được một bộ sưu tập các phần tử và truy cập vào một yếu tố riêng biệt, chúng tôi đã học. Bây giờ hãy xem xét các phương thức khác nhau cho phép bạn thay đổi các thuộc tính và giá trị của các phần tử thu thập. Một số phương thức chúng tôi đã sử dụng trong các ví dụ của chúng tôi để hiển thị kết quả hoặc thay đổi các thuộc tính của các phần tử.

    Hoạt động được sử dụng thường xuyên nhất là thay đổi nội dung của các yếu tố. Ngoài thư viện jQuery cho mục đích này, hãy sử dụng thuộc tính InnerHTML của đối tượng Tài liệu. Ví dụ: để chèn một đoạn mới vào phần tử Mã định danh Divl, bạn có thể sử dụng mã sau.

    tài liệu.getelementbyld ("Divl"). InnerHtml \u003d "Văn bản mới";

    Thư viện jQuery cũng cho phép bạn sử dụng tài sản này. Để thực hiện việc này, chúng tôi tìm thấy một phần tử bằng hàm $ (), sau đó chúng tôi chuyển đổi bộ sưu tập các phần tử jQuery thành một tập hợp các phần tử DOM.

    $ ("# Divl"). InnerHTML \u003d "Văn bản mới";

    Với mục đích này, bạn cũng có thể sử dụng phương thức GET ().

    $ ("# Divl"). Nhận (0) .innerhtml \u003d "Văn bản mới";

    Thư viện jQuery để thay đổi nội dung của các yếu tố các phương thức sau được dự định.

    Text () - Cho phép bạn lấy hoặc đặt văn bản của phần tử. Nếu tham số không được chỉ định, phương thức sẽ trả về giá trị văn bản mà không cần thẻ. Nếu có một số yếu tố trong bộ sưu tập, tất cả các giá trị ở dạng một chuỗi sẽ được trả về. Nếu bạn cần lấy giá trị của phần tử đầu tiên từ bộ sưu tập, bạn có thể sử dụng phương thức EQ ().

    cảnh báo ($ ("div"). EQ (0) .text ());

    Bạn cũng có thể giới hạn cài đặt bằng bộ chọn:

    ĐẦU TIÊN. Cảnh báo ($ (div: đầu tiên). Văn bản ());

    Khi chỉ định một chuỗi dưới dạng tham số, nó sẽ thay thế nội dung của tất cả các yếu tố của bộ sưu tập. Trong trường hợp có mặt trong dòng các ký tự đặc biệt, chúng sẽ được thay thế bằng các tương đương HTML.

    $ ("Div"). Văn bản ("Ý nghĩa mới");

    Trong ví dụ này, chuỗi trong mã HTML gốc sẽ trông như thế này.

    Giá trị mới

    HTML () - Cho phép bạn lấy hoặc đặt mã HTML của phần tử. Nếu tham số không được chỉ định, phương thức sẽ trả về giá trị cùng với các thẻ. Nếu có một số yếu tố trong bộ sưu tập, giá trị của chỉ phần tử đầu tiên sẽ được trả về.

    cảnh báo ($ (div). Html ());

    Khi bạn chỉ định mã HTML dưới dạng tham số, nó sẽ thay thế nội dung của tất cả các phần tử của bộ sưu tập và mô hình đối tượng tài liệu sẽ được cập nhật. Rút mã HTML trong tất cả các thẻ div.

    $ ("Div"). Văn bản ("Ý nghĩa mới");

    Nếu bạn cần thay đổi giá trị của mục đầu tiên từ bộ sưu tập, bạn có thể sử dụng phương thức hoặc bộ chọn hoặc bộ chọn EQ (): Đầu tiên.

    $ ("Div: đầu tiên"). HTML ("giá trị mới");

    Nối (biểu thức) - Thêm biểu thức vào cuối nội dung của mục đã chọn. Mã HTML, một phần tử DOM hoặc bộ sưu tập các phần tử jQuery có thể được chỉ định làm tham số. Ví dụ: thêm mã HTML vào cuối phần tử.

    $ ("# Divl"). Nối (" Văn bản mới");


    Bản văn

    Kết quả sẽ trông như thế này.

    Bản văn
    Văn bản mới

    Bây giờ thêm một yếu tố DOM.

    $ ("# Divl"). Nối ($ (" Văn bản mới") .Get (0));
    Bây giờ thêm phần tử đã tạo của bộ sưu tập jQuery.
    $ ("# Divl"). Nối ($ (" Văn bản mới")) ;

    PREPENDENTE (Biểu thức) - Thêm biểu thức vào đầu của nội dung của mục đã chọn. Mã HTML, một phần tử DOM hoặc bộ sưu tập các phần tử jQuery có thể được chỉ định làm tham số. Phương pháp này hoàn toàn giống hệt với phương thức Append (), ngoại trừ việc nó thêm một biểu thức không đến cuối phần tử, nhưng ở đầu nó. Ví dụ: thêm mã HTML vào đầu của mục.

    $ ("# Divl"). ĐẶT HÀNG (" Văn bản mới");


    Bản văn

    Kết quả sẽ trông như thế này.

    Văn bản mới
    Bản văn

    AppendTo (bộ chọn) - Thêm một bộ sưu tập các phần tử jQuery vào cuối tất cả các yếu tố tương ứng với bộ chọn được chỉ định. Ví dụ: thêm mã HTML vào cuối phần tử định danh divl.

    $("Văn bản mới") .Appendto (" # divl ");

    Kết quả sẽ giống như khi sử dụng phương thức Append ().
    $ ("# Divl"). Nối (" Văn bản mới");

    Như có thể thấy từ ví dụ, chúng tôi đã thay đổi các tham số ở những nơi và sử dụng phương thức Append () thay vì phương thức appendto ().

    PreDendTo (bộ chọn) - Thêm một bộ sưu tập các phần tử jQuery vào đầu tất cả các yếu tố tương ứng với bộ chọn được chỉ định. Ví dụ: thêm mã HTML vào đầu của mục định danh Divl.

    $("Văn bản mới") .prependto (" # divl ");

    Kết quả sẽ giống như khi sử dụng phương thức erpend ().
    $ ("# Divl"). ĐẶT HÀNG (" Văn bản mới");

    182

    Trong ví dụ này, chúng tôi chọn phần tử DIV và làm cho nó di chuyển bằng cách gọi nó. phương thức có thể kéo (). Như được hiển thị trong hình bên dưới, trong tài liệu mở ra, phần tử lấy vị trí bình thường của nó, nhưng sau đó nó có thể được di chuyển bằng con trỏ chuột đến bất kỳ nơi nào trong cửa sổ trình duyệt:

    Khả năng kéo các vật phẩm là hữu ích trong chính nó, nhưng nó mang lại nhiều lợi ích hơn nếu nó được sử dụng cùng với sự tương tác có thể bỏ rơi, được mô tả dưới đây.

    Tương tác có thể kéo được thực hiện chỉ thông qua việc sử dụng các kiểu đánh dấu HTML và kiểu CSS cụ thể. Điều này có nghĩa là chức năng này sẽ hoạt động gần như trong bất kỳ trình duyệt nào, nhưng các mục được cung cấp với nó sẽ không thể làm việc với tương tự như các phương tiện vận hành kéo và thả của riêng họ.

    Các thao tác kéo và thả được xác định bởi đặc tả HTML5 thường được triển khai bằng các cơ chế hệ điều hành của riêng họ. Nếu bạn sử dụng cơ chế UI JQuery kéo và thả, sau đó để tránh sự xuất hiện của các tình huống xung đột, các công cụ tương đương HTML5 sẽ bị ngắt kết nối tốt hơn. Để kết thúc này, hãy đặt phần tử tài liệu cơ thể thành thuộc tính có thể kéo của giá trị sai.

    Thiết lập tương tác có thể kéo

    Có nhiều cài đặt cho sự tương tác có thể kéo được. Các tính chất quan trọng nhất, việc xem xét được dành cho các phần sau, được hiển thị trong bảng dưới đây:

    Thuộc tính tương tác có thể kéo được
    Bất động sản Sự miêu tả
    trục. Giới hạn các khả năng di chuyển các hướng nhất định. Giá trị mặc định là sai, điều đó có nghĩa là không có hạn chế, nhưng bạn cũng có thể chỉ định giá trị "x" (chỉ di chuyển dọc theo trục X) hoặc "Y" (chỉ di chuyển dọc theo trục y)
    ngăn chặn. Giới hạn vị trí của vật phẩm di chuyển đến một khu vực màn hình cụ thể. Các loại giá trị được hỗ trợ được mô tả trong bảng bên dưới, khi xem xét ví dụ thích hợp. Giá trị mặc định - Sai, nó có nghĩa là không có hạn chế
    sỰ CHẬM TRỄ. Xác định thời gian trong đó phần tử phải được kéo trước khi nó di chuyển. Giá trị mặc định là 0, nó có nghĩa là không có độ trễ
    khoảng cách Xác định khoảng cách mà người dùng phải kéo mục từ vị trí ban đầu của nó trước khi nó thực sự di chuyển. Giá trị mặc định - 1 pixel
    lưới điện. Tiến hành buộc phải ràng buộc của phần tử di chuyển vào các tế bào lưới. Giá trị mặc định - Sai, nó có nghĩa là không có ràng buộc

    Hạn chế hướng chuyển động

    Có một số cách mà bạn có thể giới hạn chuyển động của vật phẩm với các hướng nhất định. Đầu tiên trong số này là sử dụng tùy chọn Trục, cho phép bạn giới hạn hướng chuyển động của trục X hoặc Y. Ví dụ tương ứng được đưa ra dưới đây:

    ...

    Kéo qua dọc.
    Kéo theo chiều ngang
    Chạy Ví dụ.

    Trong ví dụ này, chúng tôi xác định hai phần tử div, chọn chúng bằng cách sử dụng jQuery và gọi phương thức có thể kéo (). Như một đối số, phương pháp này được truyền đến một đối tượng ban đầu hạn chế chuyển động của cả hai phần tử div theo hướng dọc theo trục x. Áp dụng phương thức Bộ lọc jQuery (), chúng tôi có cơ hội chọn phần tử DragV mà không cần tìm kiếm lại bằng jQuery Các công cụ trong toàn bộ tài liệu và thiết lập một dịch chuyển khác được phép - dọc theo trục y. Do đó, chúng ta có được một tài liệu trong đó một Div Element chỉ có thể được kéo theo hướng dọc và cái còn lại chỉ nằm ngang. Kết quả được hiển thị trong Hình:

    Hạn chế khu vực di chuyển của yếu tố

    Bạn cũng có thể giới hạn vùng màn hình trong đó phần tử đang kéo. Để làm điều này, sử dụng tùy chọn ngăn chặn. Các định dạng của các giá trị có thể được chỉ định trong tùy chọn này được mô tả trong bảng dưới đây:

    Một ví dụ về việc sử dụng tùy chọn ngăn chặn là bên dưới:

    ...

    Kéo theo chiều ngang
    Kéo bên trong cha mẹ
    Chạy Ví dụ.

    Trong ví dụ này, khả năng di chuyển cả hai phần tử bị giới hạn theo cách mà chúng có thể được kéo chỉ trong phần tử cha, là phần tử div có kích thước cố định. Đối với một trong các yếu tố div được di chuyển bằng tùy chọn trục, một giới hạn bổ sung đã được giới thiệu, bao gồm thực tế là nó có thể di chuyển vào phần tử cha chỉ theo hướng ngang. Kết quả được minh họa trong hình:

    Hạn chế các khả năng di chuyển phần tử của các tế bào lưới

    Tùy chọn lưới cho phép bạn chỉ định ràng buộc của mục di chuyển đến các ô lưới. Tùy chọn này lấy một mảng dưới dạng giá trị của hai phần tử xác định chiều rộng và chiều cao của các ô lưới trong pixel. Một ví dụ về việc sử dụng tùy chọn lưới được hiển thị bên dưới:

    ...

    Kéo tôi
    Chạy Ví dụ.

    Trong ví dụ này, một lưới có các ô có chiều rộng 100 pixel và chiều cao 50 pixel. Khi bạn kéo phần tử, nó "nhảy ra" từ ô (vô hình) này sang ô khác. Tác dụng của sự ràng buộc là một ví dụ rất quan trọng về việc sử dụng chức năng của các tương tác, nhưng rất khó để đi qua hình ảnh màn hình.

    Bạn có thể tạo hiệu ứng liên kết chỉ đối với một hướng, chỉ định giá trị 1. Ví dụ: nếu bạn chỉ định tùy chọn tùy chọn lưới, phần tử sẽ được gắn vào các ô lưới 100 pixel khi di chuyển theo chiều ngang, nhưng chuyển động dọc sẽ được miễn phí .

    Trì hoãn di chuyển

    Có hai tùy chọn cho phép bạn sắp xếp một sự chậm trễ khi kéo phần tử di chuyển. Sử dụng tùy chọn Trì hoãn, bạn có thể đặt thời gian tính bằng mili giây trong đó người dùng phải kéo con trỏ chuột trước khi phần tử thực sự di chuyển. Một loại độ trễ khác được cung cấp bởi tùy chọn khoảng cách xác định khoảng cách tính bằng pixel mà người dùng phải kéo con trỏ chuột trước phần tử sau.

    Một ví dụ về việc sử dụng cả hai cài đặt được cung cấp dưới đây:

    ...

    Khối với thời gian trễ
    Khối với khoảng cách tối thiểu
    Chạy Ví dụ.

    Trong ví dụ này, có hai phần tử di chuyển, đối với một trong đó độ trễ được đặt bằng tùy chọn độ trễ và đối với tùy chọn khác - sử dụng khoảng cách.

    Trong trường hợp có độ trễ được xác định bởi tùy chọn trễ, người dùng phải kéo qua thời gian quy định trước khi nó dẫn đến chuyển động thực tế của phần tử. Trong ví dụ này, thời gian của khoảng cách này là 1000 ms. Di chuyển chuột tại thời điểm này hoàn toàn không, nhưng trong toàn bộ thời gian trễ, nút chuột phải được nhấn, sau đó mục có thể được di chuyển bằng cách trượt chuột. Sau khi hết thời gian trễ, phần tử di chuyển sẽ được gắn với vị trí của con trỏ chuột, có tính đến các hạn chế được áp đặt bởi các tùy chọn Lưới, Vùng và Trục, đã được đề cập trước đó.

    Tùy chọn khoảng cách có hiệu ứng tương tự, nhưng trong trường hợp này, người dùng phải kéo con trỏ chuột ít nhất đến một số pixel đã cho theo bất kỳ hướng nào từ vị trí ban đầu của phần tử. Sau đó, phần tử bị khóa sẽ di chuyển đến vị trí hiện tại của con trỏ.

    Nếu bạn áp dụng cả cài đặt vào cùng một mục, thì mục di động sẽ không di chuyển từ vị trí cho đến khi cả hai tiêu chí cho độ trễ được thực hiện, tức là. Trong khi nỗ lực kéo phần tử sẽ không kéo dài trong thời gian đã chỉ định và cho đến khi con trỏ chuột di chuyển đến số pixel đã chỉ định.

    Sử dụng các phương thức tương tác có thể kéo

    Tất cả các phương thức được xác định cho sự tương tác của DragGable được bao gồm trong tập hợp các phương thức cơ bản mà bạn đã gặp khi xem xét các widget. Các phương thức cụ thể đối với sự tương tác của DragGable không được cung cấp, vì vậy chúng tôi sẽ không xem xét chi tiết về chúng. Danh sách các phương thức có sẵn được hiển thị trong bảng dưới đây:

    Sử dụng các sự kiện tương tác có thể kéo

    Tương tác có thể kéo hỗ trợ một tập hợp các sự kiện đơn giản thông báo về việc kéo phần tử. Những sự kiện này được mô tả trong bảng dưới đây:

    Như trong trường hợp các sự kiện Widget, các sự kiện này cũng có thể phản ứng. Một ví dụ về việc bắt đầu và dừng xử lý sự kiện dưới đây:

    ...

    Kéo tôi
    Chạy Ví dụ.

    Trong ví dụ này, bắt đầu và dừng các sự kiện được sử dụng để thay đổi nội dung văn bản của phần tử trong quá trình kéo và thả. Tính năng thuận lợi này là hậu quả của thực tế là sự tương tác của DragGable được triển khai độc quyền bằng cách sử dụng các công cụ HTML và CSS: Bạn có thể sử dụng jQuery để thay đổi trạng thái của mục di chuyển ngay cả tại một thời điểm khi nó di chuyển xung quanh màn hình.

    Sử dụng tương tác nhỏ giọt

    Trong một số tình huống, một trong những khả năng kéo yếu tố có thể khá đủ, nhưng nó mang lại lợi ích lớn nhất trong trường hợp nó được sử dụng cùng với sự tương tác có thể bỏ rơi.

    Các yếu tố mà khả năng tương tác có thể bỏ rơi (lấy vật phẩm) đã được sử dụng, có được khả năng tạo các phần tử di chuyển được tạo bởi sự tương tác của DragGable.

    Lấy các mục được tạo ra bằng cách sử dụng phương thức droppable ()Nhưng để có được chức năng hữu ích, cần phải tạo các trình xử lý sự kiện trong số những người được xác định cho loại tương tác này. Các sự kiện khả dụng được hiển thị trong bảng dưới đây:

    Sự kiện tương tác nhỏ giọt
    Biến cố Sự miêu tả
    tạo nên. Xảy ra tại thời điểm áp dụng cho mục
    kích hoạt Xảy ra khi người dùng bắt đầu kéo phần tử di chuyển
    hủy kích hoạt. Xảy ra khi người dùng dừng kéo phần tử di chuyển
    kết thúc Xảy ra khi người dùng kéo phần tử di chuyển qua phần tử nhận (nhưng với điều kiện là nút chuột chưa được phát hành)
    ngoài. Xảy ra khi người dùng kéo phần tử di chuyển ngoài phần tử nhận
    rơi vãi. Xảy ra khi người dùng rời khỏi phần tử di chuyển trên phần tử nhận

    Một ví dụ về việc tạo một phần tử nhận đơn giản mà trình xử lý sự kiện DROP duy nhất được xác định bên dưới:

    ...

    Rời khỏi đây
    Kéo tôi
    Chạy Ví dụ.

    Trong ví dụ này, phần tử DIV được thêm vào tài liệu, nội dung văn bản được biểu thị bằng chuỗi "để ở đây". Chúng tôi chọn yếu tố này bằng cách sử dụng jQuery và gọi phương thức Droppable (), chuyển nó vào đối tượng với các cài đặt xác định trình xử lý cho sự kiện thả. Một phản hồi cho sự kiện này là thay đổi văn bản của phần tử di chuyển bằng phương thức Text ().

    Danh mục tương tác tương tác của danh mục kéo và thả được tạo trong ví dụ này là đơn giản nhất, nhưng nó tạo ra bối cảnh thuận tiện để giải thích khả năng hợp tác của DragGable và Droppable. Các giai đoạn khác nhau của quá trình kéo các phần tử được minh họa trong hình:

    Tất cả trông rất đơn giản. Chúng tôi kéo mục chuyển động cho đến khi nó ở trên phần tử máy chủ và để nó đi. Mục di động vẫn còn ở nơi nó còn lại, và nội dung văn bản của nó thay đổi trong phản ứng với sự xuất hiện của sự kiện thả. Các phần sau đây cho thấy cách sử dụng các sự kiện tương tác có thể bỏ rơi khác để cải thiện công việc của người dùng.

    Đèn nền của đối tượng nhận mục tiêu

    Sử dụng kích hoạt và hủy kích hoạt các sự kiện, bạn có thể tô sáng đối tượng nhận mục tiêu khi người dùng bắt đầu kéo phần tử. Trong nhiều tình huống, ý tưởng này rất hiệu quả, vì người dùng nhận được một dấu hiệu đáng tin cậy về các yếu tố nào là một phần của mô hình kéo và thả. Ví dụ tương ứng là dưới đây:

    ... $ (hàm () ($ ("# kéo"). Kéo (); $ ("# Droppable"). Droppable ((Drop: function () ("# kéo"). Văn bản ("Trái ")), Kích hoạt: Chức năng () ($ (" # Droploppable "). CSS (((viền:" Trung bình Đôi màu xanh lá cây ", BackgroundColor:" LightGreen ")));), Hủy kích hoạt: Hàm () (" # Droppable ") .css (" viền "," ") .css (" màu nền "," ");));); ... Chạy Ví dụ.

    Ngay khi người dùng bắt đầu kéo phần tử, sự kiện kích hoạt được kích hoạt - được liên kết với phần tử máy chủ của chúng tôi và hàm trình xử lý sử dụng phương thức CSS () để thay đổi các thuộc tính CSS của đường viền và màu nền của mặt hàng này. Do đó, phần tử nhận mục tiêu được tô sáng, cho biết người dùng đến sự tồn tại của giao tiếp giữa nó và một phần tử di chuyển.

    Sự kiện hủy kích hoạt được sử dụng để loại bỏ các thuộc tính CSS khỏi mục nhận và quay lại trạng thái ban đầu, ngay khi người dùng phát hành nút chuột. (Sự kiện này xảy ra bất cứ khi nào việc kéo phần tử chấm dứt, bất kể phần tử di chuyển có còn lại trên phần tử nhận hoặc không trái.) Quá trình này được minh họa trong hình:

    Xử lý các yếu tố chồng chéo

    Công nghệ kéo và thả có thể được cải thiện bằng cách thêm xử lý sự kiện. Sự kiện Over xảy ra khi 50% phần tử di chuyển hóa ra là trên bất kỳ phần nào của phần tử nhận. Sự kiện ra xảy ra khi các yếu tố chồng chéo trước đó dừng chồng chéo. Một ví dụ về phản hồi cho các sự kiện này được hiển thị dưới đây:

    $ (Hàm () ($ ("# kéo"). Kéo có thể kéo (); $ ("# Droploppable"). Droppable ((Drop: function () ("# kéo"). Văn bản ("trái")) , Kích hoạt: Chức năng () ($ ("# Droppable"). CSS (viền: "Trung bình Đôi màu xanh lá cây", BackgroundColor: "LightGreen"));), Hủy kích hoạt: Chức năng () ($ ("# Droppable"). CSS ("Biên giới", "") .css ("Màu nền", "");), Over: Chức năng () ($ ("# Droppable"). CSS (((viền: "Medium Double Red", BackgroundColor: "Red"));), OUT: Chức năng () ($ ("# Droppable"). CSS ("Biên giới", "") .csss ("màu nền", "");));));) Được; Chạy Ví dụ.

    Dưới đây là các trình xử lý giống như trong ví dụ trước, nhưng trong trường hợp này, chúng được liên kết với các sự kiện của nhiều hơn. Khi phần tử nhận chồng lên ít nhất 50% phần tử di chuyển, nó bao gồm trong khung và màu nền của nó được thay đổi, như trong hình:

    Giới hạn 50% được chỉ định được gọi là ngưỡng chồng chéo (dung sai), giá trị có thể được chỉ định khi tạo phần tử nhận, như sẽ được hiển thị sau.

    Thiết lập tương tác có thể bỏ rơi

    Để tương tác, Droppable cung cấp một số thuộc tính, bằng cách thay đổi mà bạn có thể điều chỉnh hành vi của nó. Các thuộc tính này được liệt kê trong bảng dưới đây:

    Thuộc tính tương tác có thể bỏ rơi.
    Bất động sản Sự miêu tả
    tàn tật. Nếu tùy chọn này là đúng, chức năng tương tác có thể áp dụng ban đầu bị vô hiệu hóa. Giá trị mặc định - Sai
    chấp nhận Susks nhiều yếu tố di chuyển mà yếu tố nhận sẽ phản ứng. Giá trị mặc định là *, nó tương ứng với bất kỳ yếu tố nào.
    activeclass. Chỉ định lớp được chỉ định để phản hồi sự kiện kích hoạt và hủy kích hoạt sự kiện hủy kích hoạt
    hoverClass. Chỉ định lớp sẽ được chỉ định để trả lời sự kiện qua và bị xóa để đáp ứng với sự kiện ra.
    lòng khoan dung. Xác định mức độ tối thiểu của sự chồng chéo mà sự kiện xảy ra xảy ra

    Hạn chế các yếu tố di chuyển cho phép

    Bạn có thể giới hạn tập hợp các mục di chuyển sẽ được chấp nhận bởi một phần tử được cung cấp với chức năng tương tác có thể bỏ rơi bằng cách sử dụng tùy chọn Chấp nhận. Là một tùy chọn chấp nhận, bộ chọn sẽ được chỉ định. Do đó, sự kiện tương tác có thể áp dụng sẽ chỉ xảy ra nếu phần tử di chuyển tương ứng với bộ chọn được chỉ định. Ví dụ tương ứng là dưới đây:

    ...

    Rời khỏi đây
    Yếu tố 1.
    Yếu tố 2.
    Chạy Ví dụ.

    Trong ví dụ này, có hai phần tử di chuyển với định danh Drag1 và Drag2. Khi tạo phần tử nhận, tùy chọn chấp nhận được sử dụng, với đó chúng tôi chỉ ra rằng chỉ phần tử Drag1 sẽ là một phần tử di chuyển chấp nhận được.

    Khi kéo phần tử Drag1, bạn sẽ quan sát hiệu ứng tương tự như trong các ví dụ trước. Tại những khoảnh khắc thích hợp cho mục nhận, kích hoạt, hủy kích hoạt, các sự kiện nhiều hơn sẽ được khởi chạy. Đồng thời, nếu bạn kéo phần tử Drag2, không khớp với bộ chọn được chỉ định trong tham số Chấp nhận, thì các sự kiện này sẽ không được khởi chạy. Mục này có thể được di chuyển tự do, nhưng nó sẽ không được nhận thức bởi phần tử nhận.

    Hãy chú ý đến sự thay đổi trong phương pháp chọn một phần tử được di chuyển chấp nhận được mà phương thức văn bản () sẽ được gọi. Khi tài liệu chỉ là một mục di chuyển, đối với điều này, có đủ ID thuộc tính:

    Thả: hàm () ($ ("# kéo"). Văn bản ("trái"))

    Ví dụ này có hai mục di chuyển và tùy chọn ID thuộc tính sẽ không cung cấp kết quả mong muốn, vì văn bản trong trường hợp này sẽ luôn được thay đổi trong cùng một yếu tố di chuyển, bất kể ai được chấp nhận cho mục nhận.

    Đầu ra là sử dụng đối tượng UI, mà jQuery UI cung cấp một đối số bổ sung cho mỗi trình xử lý sự kiện. Thuộc tính có thể kéo của đối tượng UI trả về một đối tượng jQuery chứa một phần tử mà người dùng kéo hoặc cố gắng rời khỏi phần tử mục tiêu, cho phép bạn chọn mục mong muốn như sau:

    Drop: Chức năng (sự kiện, UI) (ui.draggable.text ("trái")),

    Thay đổi ngưỡng chồng chéo

    Theo mặc định, sự kiện qua chỉ xảy ra trong trường hợp ít nhất 50% phần tử di chuyển chồng chéo với phần tử nhận. Giá trị của ngưỡng này có thể được thay đổi bằng tùy chọn dung sai, có thể lấy các giá trị được liệt kê trong bảng bên dưới:

    Thường xuyên nhất tôi sử dụng hai giá trị, phù hợp và chạm, vì ý nghĩa của chúng rõ ràng nhất với người dùng. Giá trị phù hợp được tôi sử dụng trong trường hợp phần tử được kéo vẫn duy trì trong khu vực của phần tử nhận được mà nó đã được di chuyển và giá trị cảm ứng - khi mục di chuyển phải trở về vị trí ban đầu (ví dụ tương ứng sẽ được đưa ra sau). Một ví dụ về việc sử dụng các tham số phù hợp và cảm ứng được đưa ra dưới đây:

    Giá trị nhân bản cho thấy UI jQuery với thực tế là bạn cần tạo một bản sao của phần tử đang được di chuyển cùng với tất cả nội dung của nó và sử dụng kết quả kết quả dưới dạng phần tử phụ trợ. Kết quả được hiển thị trong Hình:

    Phần tử phụ trợ bị xóa khi người dùng giải phóng nút chuột qua phần tử di chuyển, để lại các mục di chuyển và nhận ở vị trí ban đầu của chúng.

    Như thể hiện trong hình, mục di chuyển nguồn vẫn còn ở vị trí của nó và chỉ phần tử phụ trợ di chuyển xung quanh màn hình sau con trỏ chuột. Nếu kích thước của phần tử di chuyển cao, như trong ví dụ của chúng tôi, nó bao gồm các yếu tố khác của tài liệu, do đó thậm chí theo dõi vị trí của phần tử nhận sẽ khó theo dõi vị trí. Bạn có thể đối phó với vấn đề này bằng cách cung cấp một hàm dưới dạng giá trị của tùy chọn trình trợ giúp, như thể hiện trong ví dụ dưới đây:

    ... $ (hàm () ($ ("div.draggable") .. PNG "/\u003e")))); $ ("# giỏ"). Droploppable ((ActiveClass: "hoạt động", hoverclass: "di chuột"))); )); ... Chạy Ví dụ.

    Khi người dùng bắt đầu kéo phần tử, jQuery UI khiến một hàm được chỉ định bởi tham số người trợ giúp và sử dụng mục được trả về dưới dạng đối tượng di chuyển. Trong trường hợp này, tôi sử dụng jQuery để tạo thành phần IMG. Kết quả được hiển thị trong Hình:

    Một hình ảnh nhỏ đóng vai trò của một yếu tố thay thế, giúp đơn giản hóa rất nhiều theo dõi các yếu tố khác của tài liệu.

    Đối tượng UI, mà JQuery UI truyền các sự kiện tương tác có thể bỏng, chứa thuộc tính Helper và thuộc tính này có thể được sử dụng để thao tác phần tử phụ trợ trong khi kéo nó. Một ví dụ về việc sử dụng thuộc tính này kết hợp với các sự kiện nhiều hơn dưới đây:

    ... $ (hàm () ($ ("div.draggable") .. PNG "/\u003e")))); $ ("# Giỏ #"). Droppable ((ActiveClass: "hoạt động", hoverclass: "di chuột", qua: Chức năng (sự kiện, UI) (UI.Helper.css ("Border", "Dày Solid # 27e6ed"))))) , OUT: Chức năng (sự kiện, UI) (UI.Helper.css ("Border", ""))); )); ...

    Ở đây, các sự kiện của Over và Out, cũng như thuộc tính UI.Helper được sử dụng để hiển thị khung xung quanh phần tử phụ trợ khi nó chồng lấp vật phẩm nhận. Kết quả được hiển thị trong Hình:

    Ràng buộc với các cạnh của các yếu tố

    Thông qua tùy chọn Snap Có thể đảm bảo rằng phần tử di chuyển là "thu hút" vào các cạnh của các phần tử, bên cạnh đó nó đi qua. Là một giá trị, tùy chọn này nhận được một bộ chọn. Phần tử di chuyển sẽ được gắn vào các cạnh của bất kỳ phần tử nào tương ứng với bộ chọn đã chỉ định. Một ví dụ về việc sử dụng tùy chọn Snap được đưa ra dưới đây:

    Chạy Ví dụ. jquery ui.

    Cái rổ
    Quay lại đây
    Kéo tôi

    Khi phần tử di chuyển đang tiến gần đến một trong các yếu tố thích hợp, giống như "thu hút" với nó theo cách mà các cạnh lân cận của họ tiếp xúc. Đối với một ràng buộc như vậy, bạn có thể chọn bất kỳ yếu tố nào, và không chỉ nhận được. Trong ví dụ này, tôi đã thêm một phần tử DIV và được xác định cho tùy chọn SNAP, chọn mục này trong tài liệu, cũng như mục nhận.

    Có một cặp tùy chọn phụ trợ cho phép bạn định cấu hình chính xác hơn hành vi của các yếu tố liên quan đến ràng buộc. Một trong số họ là tùy chọn Snapmode. Với nó, bạn có thể chỉ định loại ràng buộc. Các giá trị sau được cho phép: bên trong (Ràng buộc với các cạnh bên trong của các yếu tố), bên ngoài. (ràng buộc với các cạnh ngoài của các yếu tố) và cả hai (Ràng buộc với tất cả các cạnh; được sử dụng theo mặc định).

    Tùy chọn Snaptolerance. Cho phép bạn chỉ định cách khoảng cách nên tiếp cận phần tử đích đến cạnh của phần tử mục tiêu trước khi ràng buộc xảy ra. Giá trị mặc định là 20, có nghĩa là 20 pixel. Ví dụ sử dụng giá trị 50 mà ràng buộc tương ứng với khoảng cách lớn hơn. Điều rất quan trọng là chọn giá trị của tùy chọn này một cách chính xác. Nếu giá trị tùy chọn Snaptolence quá nhỏ, người dùng có thể không nhận thấy hiệu ứng của sự ràng buộc, và nếu nó quá lớn, thì phần tử di chuyển sẽ bắt đầu thực hiện các bước nhảy bất ngờ, có nhiều nguyên tố có kích thước xa.

    Có những trường hợp khi bạn có thể cần tạo một mục được kéo bên trong ứng dụng web của mình. Đây là chức năng tuyệt vời, tuy nhiên, bạn có thể muốn các yếu tố ở lại một nơi mới, sau khi kéo. Trong bài viết hôm nay, bạn sẽ tìm hiểu cách bạn có thể dễ dàng kéo và bảo mật phần tử mong muốn ở một địa điểm mới ngay cả sau khi khởi động lại trang, sử dụng Capture và lưu trữ tọa độ X và Y của nó.

    Kịch bản

    Vì vậy, bạn có một mục trên trang. Bạn có thể kéo nó đến đó và ở đây. Nhưng khi trang khởi động lại, phần tử quay trở lại vị trí ban đầu. Và mặc dù chúng ta cần phần tử được kéo, cần thiết là phần tử của chúng ta là đủ để kéo một lần. Hãy xem xét một giải pháp đơn giản thực hiện chức năng này.

    Khởi đầu

    Trong ví dụ này, chúng tôi sẽ cần một thư viện và một plugin jQuery-JSON. Ngoài ra, chúng tôi cũng sẽ sử dụng cơ sở dữ liệu PHP và MySQL để phân tích và lưu trữ dữ liệu của chúng tôi. Nếu bạn chưa quen với jQuery, đừng lo lắng. JQuery là một thư viện JavaScript có thể mở rộng, nhanh chóng và nhẹ, dễ dàng và thú vị để sử dụng. Thư viện có một tài liệu có cấu trúc tốt và một cộng đồng lớn.

    HTML và CSS.

    Hãy bắt đầu với đánh dấu HTML và các kiểu cho ví dụ của chúng tôi. CSS đầu tiên:

    Html, cơ thể (nền: # 151515; lề: 0 0 0 0; Padding: 0 0 0 0;) #grogbox (nền: # 333; Border: 1px Solid # 000; Chiều cao: 400px; Margin: 30px Auto Auto; Vị trí: tương đối; chiều rộng: 960px; -moz-Border-Radius: 10px; -webkit-Border-Radius: 10px;) #element (Nền: # 666; Biên giới: 1px # 000 Solid; Con trỏ: di chuyển; Chiều cao: 143px; PADDING: 10px 10px 10px 10px; Chiều rộng: 202px; -Moz-Border-Radius: 10px; -webkit-Border-Radius: 10px;) #responder (Color: #fff; Margin: 0 Auto 0 Auto; Width: 960px;)

    CSS rất đơn giản. Chúng tôi gán các thuộc tính HTML và cơ thể bằng 0 để làm sạch các phần bên ngoài và bên trong, sau đó đặt chiều cao, chiều rộng và các thuộc tính khác cho các phần tử của chúng ta. - Moz-Border-Radius và -Webkit-Border-Radius - Đây là hai thuộc tính cho phép chúng ta tạo các góc tròn (hoạt động cho đến nay chỉ có trong Mozilla Firefox và Safari 3) cho các yếu tố của chúng ta. Bây giờ, hãy xem HTML:

    Yếu tố kéo đơn giản kiên trì với jQuery

    Di chuyển hộp.

    Như bạn có thể thấy, chúng tôi đã tạo một trang rất đơn giản trong đó CSS \u200b\u200bcủa chúng tôi được kết nối, thư viện JavaScript và plugin, ngoài ra, trang chứa các mục mà chúng tôi sẽ áp dụng một số hiệu ứng và sự kiện. Xin lưu ý rằng tệp jQuery-UI là một cụm đặc biệt chỉ bao gồm kernel và các chức năng của các phần tử kéo.

    Javascript.

    Bây giờ là thú vị nhất! Đầu tiên, hãy xem xét các chức năng cơ bản mà chúng ta sẽ sử dụng để áp dụng một số hiệu ứng cho các mặt hàng của chúng tôi. Chúng tôi sẽ phân tích tất cả mọi thứ vào căn cứ.

    Đặt mã này bên dưới HTML ngay sau thẻ đóng cơ thể.

    PHP.

    Chà, hãy làm một cái gì đó với dữ liệu đến từ jQuery của chúng tôi. Trước tiên, bạn cần tạo một cơ sở dữ liệu đơn giản, để lưu trữ tọa độ của chúng tôi, sau đó chúng tôi sẽ sử dụng để xác định vị trí của mặt hàng của chúng tôi. Sau đó, chúng ta sẽ cần một tệp CONFIG.php, trong đó các tham số của kết nối với cơ sở dữ liệu sẽ được ghi lại và sau đó chúng ta chuyển sang UpdateCords.php.

    Cơ sở dữ liệu: "Xycoords" tạo bảng nếu không tồn tại hợp lý. (tôi int (11) không null auto_increment, x_pos. int (4) không , y_pos. int (4) không , khóa chính ( tôi)) Engine \u003d myisam Bộ ký tự mặc định \u003d Latin1;

    Config.php.

    updatecoords.php.

    các tọa độ dưới dạng $ MỤC) (// Trích xuất số x cho bảng $ Tọa độ_x \u003d preg_replace ("/ ^ \\ d \\ s] /", "", $ item-\u003e actop); // trích xuất số y cho bảng $ tọa độ_y \u003d preg_replace ("/ [^ \\ d \\ s] /", "", $ item-\u003e coordleft); // thoát các giá trị của chúng tôi - là thực hành tốt $ x_coord \u003d mysqli_real_escape_string ($ link, $ coord_x); $ y_coord \u003d mysqli_real_escape_string ($ link, $ coord_y); // thiết lập truy vấn của chúng tôi $ sql \u003d "Cập nhật các hợp lệ set x_pos \u003d" $ x_coord ", y_pos \u003d" $ y_coord ""; // thực hiện truy vấn của chúng tôi mysqli_query ($ link, $ sql) hoặc Die ("Lỗi cập nhật các huy chương:". Mysqli_error ());) // Trả lại thành công echo "Thành công"; ? \u003e.

    Mọi thứ đều khá đơn giản ở đây. Điều đầu tiên chúng tôi làm là kiểm tra xem dữ liệu trong tệp đã được truyền đi hay chưa. Nếu điều này xảy ra, chúng tôi bao gồm tệp cài đặt Config.php của chúng tôi và gán một giá trị biến dữ liệu $ json_decode (đã thông qua biến POST); JSON_DECODE là một hàm PHP được trình bày trong PHP 5.2.0, cho phép bạn giải mã chuỗi JSON.

    Do biến dữ liệu $ của chúng tôi chứa một loạt dữ liệu, chúng ta cần tháo nó thành các phần để có được các giá trị mong muốn. Để thực hiện việc này, chúng tôi sẽ thông qua mảng $ Mảng-\u003e Coords () (được lấy từ biến thứ tự trong JavaScript) và xử lý từng mục. Do đó, từ mỗi phím cặp - giá trị của danh sách sẽ được tạo, trong tương lai cho biết và tạo một biến cho đầu ra của nó. Đồng thời, chúng tôi sẽ sử dụng chức năng Preg_Replace để loại bỏ các ký tự không cần thiết. Ngoài ra, chúng tôi sẽ chuẩn bị các phần chèn của chúng tôi để chèn vào cơ sở dữ liệu bằng cách che chắn dấu ngoặc kép và dấu nháy đơn bằng hàm MySQLI_REAL_ESSRING_STRING. Nếu mọi thứ diễn ra tốt đẹp, chúng ta sẽ cần phải trả lại kết quả thành công của JavaScript.

    Cuối cùng

    Bây giờ tất cả mọi thứ đã sẵn sàng cho chúng tôi để có được tọa độ phần tử và chuyển chúng sang PHP để viết, chúng tôi sẽ cần thay đổi đánh dấu HTML của chúng tôi để hiển thị vị trí của mục. Đối với điều này, chúng tôi xóa đánh dấu HTML đơn giản và tạo nó bằng PHP:

    Di chuyển hộp.
    "; } ?>

Ở đây chúng tôi đáp ứng một yêu cầu đơn giản cho cơ sở dữ liệu để chọn tất cả các dòng từ bảng Coords. Sau đó, chúng tôi gọi là chu kỳ trong khi, định nghĩa từng dòng chúng tôi đã chọn dưới dạng $ $. Bây giờ, chúng ta có thể gán các biến bằng nhau với mỗi chuỗi riêng lẻ thu được từ cơ sở dữ liệu và lấy chúng ở nơi thích hợp.

Ấn phẩm tương tự: