search

Kéo và thả HTML trò chơi

Ngày đăng: 25/01/2023
Trả lời: 0
Lượt xem: 183

Đây là một phần trong tài liệu học tập của tôi để vượt qua kỳ thi Microsoft 70-480. Lập trình trong HTML5 với kỳ thi chứng chỉ JavaScript & CSS3

Show

Trước HTML5, khả năng sử dụng các thao tác kéo và thả chỉ có thể thực hiện được với một số trình duyệt nhất định và thường được triển khai bằng cách sử dụng thư viện của bên thứ ba, chẳng hạn như jQuery

Bây giờ Kéo và thả là công dân hạng nhất của HTML5. Bạn vẫn có thể sử dụng jQuery cho các chức năng khác nhưng không bắt buộc phải kéo và thả

1. Kéo và thả

Tạo tính năng kéo và thả của HTML5 có nghĩa là bạn có thể có khả năng tương thích với trình duyệt và tích hợp trình duyệt. Điều này thậm chí có thể mở rộng để tích hợp với hệ điều hành

Để minh họa kỹ thuật kéo và thả, hãy xem xét trang HTML sau đây, trang này xác định một vùng chứa hình vuông lớn bên trong nó




    
    
    
    Scramble 1
    


    

        
1

        
2

        
3

Tài liệu HTML này chứa một

phần tử có 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
3 được gọi là 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
4. Bên trong container có bốn

các phần tử là "lỗ hổng" có thể chứa một mục. Ba người đầu tiên được dân cư

CSS sử dụng flexbox để định tâm và chứa các quy tắc sau

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}

Quy tắc 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
5 căn giữa vùng chứa

theo chiều ngang của trang. Quy tắc 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
6 đặt màn hình flexbox ở giữa và căn chỉnh từng lỗ (

)

Các quy tắc trong 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
7 đặt màn hình flexbox ở giữa mỗi thành phần mục (

) trong mỗi lỗ. Quy tắc cuối cùng dành cho các mục và nó đặt một hình vuông màu xám với một số lớn ở giữa. Phần cuối cùng của kiểu thiết lập 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
8 để ngăn người dùng vô tình chọn văn bản khi cố gắng thực hiện thao tác kéo


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/a-scramble1. html

2. hỗ trợ trình duyệt

Có hai công cụ tôi sử dụng để đảm bảo mã tôi viết hoạt động trên nhiều trình duyệt và nền tảng nhất có thể. Nói cách khác, tôi nhận được sự tuân thủ của nhiều trình duyệt và mức độ phù hợp càng rộng càng tốt đối với các tính năng CSS, JavaScript và HTML5 mà tôi sử dụng

Hai công cụ là

3. tôi có thể sử dụng

Đây là một công cụ tuyệt vời cho phép bạn tìm kiếm bất kỳ tính năng HTML, JavaScript hoặc CSS nào và xem mức độ phù hợp của trình duyệt hiện tại đối với tính năng này. Sau đó, điều này cho phép bạn đưa ra quyết định sáng suốt về việc có nên sử dụng tính năng này như hiện tại hay không, sử dụng tính năng này với một polyfill và/hoặc tiền tố tự động hay tìm một cách hoàn toàn riêng biệt để triển khai chức năng

Chẳng hạn, chúng tôi có một quy tắc CSS triển khai 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
8. Nếu sau đó tôi đi đến http. // caniuse. com, tôi có thể nhận được tất cả các loại thông tin về tính năng đó

Ở đây tôi thấy tất cả các trình duyệt hiện đang hỗ trợ tính năng này cùng với số phiên bản đã bắt đầu hỗ trợ tính năng này. Điều này bao gồm IE11, Edge16+, Firefox58+, Chrome64+, v.v. Ngoài ra, tôi có thể di chuột qua bất kỳ hộp trình duyệt nào để xem ghi chú hỗ trợ, ngày phát hành và thị phần để biết tỷ lệ phần trăm người dùng sử dụng nền tảng cụ thể đó

Thông tin tôi thấy thực sự hữu ích là số liệu thống kê ở phía bên tay phải của trang. Ở đây chúng tôi thấy rằng tính năng 

.dragging {
    background-color: yellow;
}
0 của tôi sẽ được hỗ trợ trên toàn cầu vào năm 87. 23% của tất cả các trình duyệt và 97. 51% trình duyệt trong nước

Dữ liệu đặc biệt thú vị là những con số không có tiền tố. Điều này cho thấy chúng ta sẽ chỉ có 57. 58% & 45. Tương ứng, hỗ trợ trình duyệt 56%, không bao gồm tính năng tự động sửa lỗi

Điều này có nghĩa là chúng tôi sẽ mất một nửa cơ sở người dùng nếu chúng tôi không tự động sửa tiền tố CSS của mình

4. Tự động sửa tiền tố CSS

Vì vậy, autoprefixing là gì?

Autoprefixing là quá trình sử dụng css dành riêng cho trình duyệt để đảm bảo một tính năng cụ thể được hiển thị chính xác trên nền tảng đó

Hãy xem giao diện của CSS Autoprefixer

Cách nó hoạt động là, chúng tôi sao chép CSS của mình vào vùng chứa nguồn và đầu ra có tiền tố CSS được hiển thị trong vùng chứa đầu ra. Sau đó, chúng tôi có thể sao chép và dán lại vào tệp css của mình

Đối với hồ sơ, đây là cách thủ công để đạt được điều này. Có nhiều giải pháp bộ xử lý trước và sau sẽ tự động thực hiện việc này cho bạn, nhưng những giải pháp này yêu cầu cài đặt và cấu hình. Hiện tại, giải pháp nhanh và bẩn là chỉ cần sao chép và dán

Như bạn có thể thấy, 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
8 xuất ra bốn quy tắc hoặc khai báo khác nhau để tuân thủ trên các trình duyệt khác nhau

Sử dụng CSS mới đảm bảo chức năng của tính năng sẽ tăng lần lượt từ 57 & 45% lên 87 và 97%

Bước cuối cùng, sau khi chúng tôi hoàn thành công việc với CSS của mình, là sao chép nội dung của toàn bộ CSS của chúng tôi vào vùng chứa nguồn để có được bản sao đầu ra hoàn chỉnh

Vì mục đích của những ghi chú này, tôi sẽ giữ cho CSS đơn giản và không có tiền tố

5. kéo

Để chỉ định cho trình duyệt rằng một phần tử có thể được kéo, hãy sử dụng thuộc tính 

.dragging {
    background-color: yellow;
}
2. Nó có ba giá trị hợp lệ. 
.dragging {
    background-color: yellow;
}
3, 
.dragging {
    background-color: yellow;
}
4 và 
.dragging {
    background-color: yellow;
}
5. Đối với hầu hết các trình duyệt, 
.dragging {
    background-color: yellow;
}
5 là giá trị mặc định, có nghĩa là trình duyệt quyết định xem phần tử đó có thể kéo được hay không. Ví dụ: phần tử 
.dragging {
    background-color: yellow;
}
7 thường có thể kéo được theo mặc định, nhưng

không phải

Trong mẫu HTML này, mục này là một

phần tử và nó không thể kéo theo mặc định, vì vậy chúng tôi cần thêm thuộc tính có thể kéo


    

        
1

    

    

        
2

    

    

        
3

Sau khi thêm thuộc tính 

.dragging {
    background-color: yellow;
}
2 vào các mục, bạn có thể kéo chúng


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/a-scramble2. html

Bạn có thể kéo và mục, nhưng mục chứa biểu tượng con trỏ cấm vào để cho biết rằng mục đó không thể bỏ được

6. Hiểu các sự kiện kéo

Khi kéo và thả, có những sự kiện dựa trên phần tử được kéo và có những sự kiện dựa trên mục tiêu thả. Sử dụng các sự kiện này, bạn sẽ có thể tùy chỉnh thao tác kéo và thả khi cần. Các sự kiện sau dựa trên phần tử được kéo

  • dragstart Kích hoạt khi bắt đầu kéo
  • kéo Kích hoạt liên tục khi phần tử đang được kéo
  • dragend Kích hoạt khi kéo xong

Đoạn mã sau được đặt trong scramble1. js và hiển thị việc sử dụng các sự kiện 

.dragging {
    background-color: yellow;
}
9 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
0 để thay đổi kiểu của mục được kéo cho đến khi quá trình kéo kết thúc

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

Ví dụ sử dụng chức năng sẵn sàng cho tài liệu jQuery để đăng ký các sự kiện 

.dragging {
    background-color: yellow;
}
9 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
0 trên tất cả các phần tử được gán lớp CSS 'mục'. Hàm 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
3 thêm lớp CSS 'kéo' khi quá trình kéo bắt đầu và sau đó đặt 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
4 với giá trị của mục được kéo. Hàm 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
5 loại bỏ lớp 'kéo'

Trong tệp CSS, quy tắc kéo được xác định như sau

.dragging {
    background-color: yellow;
}

Thao tác này sẽ thay đổi nền của mục được kéo cho đến khi quá trình kéo dừng lại


mẫu sống. https. //james-linh mục. github. io/mẫu nút/ch 13-Drag-Drop/a-scramble 3. html

7. Rơi

Sau khi kéo, thả phải được thực hiện. Các sự kiện sau dựa trên mục tiêu thả

  • dragenter Kích hoạt khi kéo vào vùng thả
  • dragover Kích hoạt liên tục khi phần tử được kéo qua vùng thả
  • dragleave Kích hoạt khi mục được kéo rời khỏi vùng thả
  • thả Kích hoạt khi vật phẩm được kéo bị rơi

Các sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 mặc định từ chối vật phẩm được kéo, đó là lý do tại sao bạn hiện không thể thả vật phẩm. Bạn có thể kích hoạt thả bằng cách hủy hành động mặc định đối với các sự kiện này

Sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8 xóa mục bị xóa khỏi mô hình đối tượng tài liệu (DOM) và sau đó thêm mục đó trở lại DOM tại vị trí vùng thả. Đoạn mã sau đăng ký các sự kiện 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6, 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}

Trong ví dụ này, chức năng sẵn sàng cho tài liệu đã thêm các câu lệnh để đăng ký vào 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6, 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8. Lưu ý rằng 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 gọi cùng một hàm 



    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:
7, điều này ngăn chặn việc từ chối các mục được kéo

Sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8 gọi hàm dropItem. Trong 



    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:
9, một đối tượng jQuery được tạo từ 
$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
0, là mục tiêu thả xuống và được gán cho một biến 
$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
1. Câu lệnh 
$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
2 kiểm tra xem mục tiêu thả có lớp CSS 'lỗ hổng' hay không. Điều này là cần thiết vì bạn có thể làm rơi thứ gì đó lên trên 'vật phẩm' thay vì 'lỗ hổng'

Khi vật phẩm ở trong lỗ, sự kiện thả bong bóng sẽ nổi lên và thực hiện sự kiện thả vào lỗ. Nếu mục tiêu thả là một cái lỗ, mã sẽ kiểm tra xem có trẻ em hay không;

Nếu mục tiêu thả là một lỗ không có con, jQuery sẽ tách mục được kéo khỏi DOM và sau đó nối thêm 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
4 vào mục tiêu thả


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/a-scramble4. html

Kiểm tra nhanh

  • Hoạt động mặc định của hai sự kiện nào phải được ngăn chặn để cho phép sự kiện thả hoạt động?

Giải pháp

  • Sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    6 và 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    7

8. Sử dụng đối tượng DataTransfer

Ví dụ trước minh họa thao tác kéo và thả hoàn chỉnh, nhưng bạn cũng có thể sử dụng đối tượng 

$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
6 để truyền dữ liệu từ sự kiện 
.dragging {
    background-color: yellow;
}
9 sang sự kiện 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8

Bằng cách sử dụng đối tượng DataTransfer, bạn không cần tạo biến toàn cục để tham chiếu mục đang được kéo. Việc sử dụng đối tượng DataTransfer cũng cho phép bạn chuyển bất kỳ dữ liệu nào đến sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8 miễn là dữ liệu đó có thể được biểu diễn dưới dạng chuỗi hoặc URL. Đối tượng 



    
    
    
    Files 1
    


    

        
Drag and drop files here...
0 được tham chiếu như một thuộc tính 



    
    
    
    Files 1
    


    

        
Drag and drop files here...
1 trong sự kiện 
.dragging {
    background-color: yellow;
}
9

GHI CHÚ. Sử dụng đối tượng DataTransfer với jQuery

Hệ thống sự kiện của jQuery chuẩn hóa đối tượng sự kiện theo tiêu chuẩn W3C. Hầu hết các thuộc tính từ sự kiện ban đầu được sao chép và chuẩn hóa thành đối tượng sự kiện mới




    
    
    
    Files 1
    


    

        
Drag and drop files here...
1 là một thuộc tính không được sao chép vào đối tượng Sự kiện được tiêu chuẩn hóa của jQuery. Do đó, nó có thể được truy cập bằng cách sử dụng đối tượng 



    
    
    
    Files 1
    


    

        
Drag and drop files here...
4 như sau




    
    
    
    Files 1
    


    

        
Drag and drop files here...
5

Bạn có thể truyền dữ liệu cho sự kiện drop bằng cách sử dụng thuộc tính 




    
    
    
    Files 1
    


    

        
Drag and drop files here...
1. Đối tượng DataTransfer có các thành viên sau

  • ClearData() Phương thức xóa dữ liệu trong đối tượng DataTransfer
  • dropeffect Thuộc tính nhận hoặc đặt loại hoạt động kéo và thả và loại con trỏ. Nó có thể được đặt thành 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    7, 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    8, 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    9 hoặc 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    0
  • effectAllowed Thuộc tính nhận hoặc đặt các hoạt động được phép trên phần tử nguồn. Nó có thể được đặt thành 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    7, 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    2, 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    3, 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    8, 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    5, 
    


    
    
    
    Files 1
    


    
    
        
    Drag and drop files here...
    9, 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    7, 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    8 hoặc 
    body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}
    0
  • files Thuộc tính nhận danh sách tệp của các tệp đang được kéo. Nếu các tệp không liên quan thì thuộc tính là một danh sách trống
  • getData() Phương thức lấy dữ liệu trong đối tượng DataTransfer
  • setData() Phương thức thiết lập dữ liệu trong đối tượng DataTransfer
  • type Thuộc tính nhận danh sách chuỗi các loại được gửi

Trong ví dụ sau, tài liệu HTML có một danh sách ô tô không có thứ tự, từ đó bạn có thể kéo và thả bất kỳ ô tô nào vào một danh sách ô tô yêu thích không có thứ tự khác như sau




    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:

Tại đây, mỗi mục trong danh sách ô tô đều có thể kéo được và sử dụng thuộc tính dữ liệu để cung cấp dữ liệu sẽ được thu thập khi quá trình kéo bắt đầu và sau đó được chuyển đến sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8. Tệp JavaScript tương tự như ví dụ trước, được sử dụng để di chuyển số, nhưng lần này, dữ liệu được chuyển đến sự kiện thả bằng cách sử dụng đối tượng DataTransfer như sau

$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}

Trong chức năng sẵn sàng cho tài liệu, chúng tôi đăng ký các sự kiện cần thiết. Hàm 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
3 được gọi khi quá trình kéo bắt đầu. Nó thu thập dữ liệu từ thuộc tính data-value và gán nó cho đối tượng DataTransfer. Thuộc tính 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
02 được đặt thành 'sao chép', thay đổi con trỏ chuột thành con trỏ có dấu cộng bên dưới. Nếu nó được đặt thành 'di chuyển', con trỏ sẽ là một con trỏ có hộp nhỏ bên dưới

Hàm 




    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:
9 được gọi từ sự kiện 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8. Đối tượng DataTransfer cũng có sẵn trong sự kiện drop thông qua thuộc tính 



    
    
    
    Files 1
    


    

        
Drag and drop files here...
1. Dữ liệu được lấy ra, chia thành một mảng và được gán cho một biến. Tiếp theo, phần tử được kiểm tra xem đó có phải là ô tô không. Nếu vậy, một mục danh sách mới được tạo và nối vào phần tử thả. Cuối cùng, chúng tôi gọi phương thức 



    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:
7 của sự kiện đã xử lý dữ liệu bị mất để trình duyệt mặc định xử lý cũng không xử lý dữ liệu bị mất


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/b-cars1. html

9. Tóm lược

  • Chức năng kéo và thả trong HTML5 hiện đã nhất quán và tương thích trên các trình duyệt
  • Thuộc tính kéo và thả phải được đặt thành true và được thêm vào từng phần tử cần có thể kéo được
  • Các sự kiện 
    .dragging {
    background-color: yellow;
}
    9 và 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    0 có thể được sử dụng để thay đổi kiểu của phần tử được kéo
  • Các sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    6 và 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    7 phải được mã hóa để ngăn hoạt động mặc định và cho phép loại bỏ
  • Sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    8 kích hoạt khi vật phẩm được thả vào mục tiêu rơi
  • Đối tượng DataTransfer được sử dụng để truyền dữ liệu giữa sự kiện 
    .dragging {
    background-color: yellow;
}
    9 và sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    8

10. câu hỏi ôn tập

  1. Sự kiện nào sau đây kích hoạt liên tục trong thao tác kéo và thả?
    • kéo bắt đầu
    • lôi kéo
    • kéo dài
    • người kéo lê
    • xe kéo
    • lá kéo
    • làm rơi
  2. Sự kiện nào sau đây được liên kết với vật phẩm được kéo?
    • kéo bắt đầu
    • lôi kéo
    • kéo dài
    • người kéo lê
    • xe kéo
    • lá kéo
    • làm rơi
  3. Sử dụng đối tượng DataTransfer, loại dữ liệu nào bạn có thể chuyển đến sự kiện drop?
    • Mọi chuỗi, số, ngày/giờ hoặc giá trị Boolean hợp lệ
    • Bất kỳ URL nào trong cùng miền với trang web
    • Bất kỳ đối tượng JSON nào
    • Bất kỳ đối tượng nào có thể được biểu diễn dưới dạng chuỗi hoặc URL

11. Kéo và thả tập tin

Bạn có thể kéo và thả tệp bằng API tệp (giao diện lập trình ứng dụng), cũng là một phần của HTML5. API tệp cung cấp quyền truy cập gián tiếp vào tệp theo cách được kiểm soát chặt chẽ

12. Sử dụng các đối tượng FileList & File

Khi xóa một tệp, đối tượng DataTransfer trả về một đối tượng 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
14 là tập hợp của các đối tượng 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
15 đã bị xóa. Đối tượng 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
15 có các thuộc tính sau

  • name Thuộc tính nhận tên tệp và phần mở rộng mà không có đường dẫn
  • gõ Thuộc tính nhận loại MIME của tệp
  • size Thuộc tính lấy kích thước tệp theo byte

Tài liệu HTML sau đây có một

phần tử mà các tệp có thể được thả vào và một 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
17

Tệp css chứa các quy tắc để định kích thước mục tiêu kéo và thả cũng như các tules để định dạng bảng thông tin

body { font-family: Arial, Helvetica, sans-serif; }
#target {
    border: solid;
    width: 500px;
    height: 150px;
    background-color: gold;
    text-align: center;
}
#fileInfo {
    width: 500px;
}
table, th, td {
    border-collapse: collapse;
    border: 1px solid #333;
}
th, td {
    padding: 5px;
}

Chưa có JavaScript, vì vậy bạn có thể nghĩ rằng mình không thể kéo và thả bất kỳ tệp nào ở đây, nhưng có một hành vi mặc định cho các tệp được kéo và thả. Nếu bạn thả tệp ở bất kỳ đâu trên trang web, tệp sẽ mở trong trang nếu trình duyệt có thể hiển thị tệp, nếu không tệp sẽ mở trong cửa sổ khác


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/c-files1. html

Để xử lý các tệp bị xóa và hiển thị thông tin tệp trong bảng bên dưới hộp thả xuống, JavaScript sau đây được thêm vào

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
0

Trong chức năng sẵn sàng cho tài liệu, jQuery được thiết lập để hiển thị đối tượng DataTransfer. Các sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 sau đó được lập trình để ngăn hoạt động mặc định ngăn. Sau khi sự kiện 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8 được thêm vào, tệp được kéo có thể bị xóa

Chúng tôi đăng ký sự kiện 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8 đó và thêm trình xử lý chức năng 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
22. JavaScript được hoàn thành với đoạn mã sau

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
1

Hàm 




    
    
    
    Cars 1
    


    
What cars do you like?

    
    
        
  • Chevrolet
    • 
        
  • Ford
    • 
        
  • BMW
    • 
    

    
Drop your favorite cars below:
9 truy xuất tập hợp tệp từ đối tượng DataTransfer. Nội dung trong bảng thông tin tệp được ghi đè bằng tiêu đề, điều này cũng xóa mọi thông tin hiện có trong bảng. Tiếp theo, một vòng lặp for được sử dụng để lặp qua các tệp và thêm một hàng thông tin vào bảng thông tin tệp cho mỗi tệp. Cuối cùng, chúng tôi ngăn hành vi mặc định của trình duyệt là mở từng tệp

Bây giờ chúng ta có thể lấy một loạt tệp và kéo chúng vào khu vực thả màu vàng


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/c-files2. html

Khi một số tệp được kéo và thả, bảng thông tin tệp sẽ được điền và hiển thị thông tin


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/c-files2. html

Kiểm tra nhanh

  • Đối tượng nào cung cấp quyền truy cập vào các tệp bị xóa?

Giải pháp

13. Tom tăt bai học

  • Đối tượng File cung cấp các thuộc tính tên, loại và kích thước
  • Để kích hoạt tính năng xóa tệp, các sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    6 và 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    7 phải được lập trình để ngăn hành vi mặc định ngăn chặn tính năng xóa tệp
  • Đối tượng DataTransfer cung cấp quyền truy cập vào danh sách các tệp bị xóa
  • Sự kiện 
    var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
    8 cung cấp quyền truy cập vào đối tượng DataTransfer

14. ôn bài

  1. Bạn cần đăng ký kéo và thả tệp chương trình cho những sự kiện nào?
    • kéo bắt đầu
    • lôi kéo
    • kéo dài
    • người kéo lê
    • xe kéo
    • lá kéo
    • làm rơi
  2. Cái nào sau đây không phải là thuộc tính của đối tượng File?

15. Tạo trò chơi tranh số

Trong bài tập này, chúng ta áp dụng kiến ​​thức về kéo và thả bằng cách tạo một trò chơi tranh số

Trò chơi bao gồm một bàn cờ có bốn hàng và bốn cột cung cấp mười sáu ô vuông trong đó có thể tồn tại một ô trượt. Mười lăm trong số các ô vuông bị chiếm bởi các ô được đánh số. Một hình vuông trống và có thể được sử dụng khi di chuyển ô. Chỉ có thể di chuyển một ô liền kề với ô trống

Mục tiêu của trò chơi là sắp xếp các ô theo số thứ tự từ vị trí đã xáo trộn

16. Cấu trúc mã cơ bản

Trước tiên, chúng tôi bắt đầu với một trang HTML cơ bản có tham chiếu đến jQuery mới nhất và tham chiếu đến biểu định kiểu hỗ trợ và tệp JavaScript

Chúng tôi thêm vào một 'tin nhắn' và 'gameBoard'

.

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
2

Trong biểu định kiểu, chúng tôi thêm các quy tắc sau cho bảng trò chơi, thông báo và ô vuông sẽ được tạo theo chương trình

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
3

trong cuộc tranh giành. js chúng ta khai báo hai biến. Một để chỉ định số lượng hình vuông và cái còn lại để theo dõi vị trí số của hình vuông trống

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
4

Sau đó, chúng tôi thêm một cuộc gọi đến một phương thức 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
27 và 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
28 trong chức năng sẵn sàng cho tài liệu jQuery

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
5

Cuối cùng, chúng ta tạo các phương thức 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
27 và 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
28. Mỗi cái trong số này sử dụng vòng lặp for để tạo ô vuông con và ô xếp con cho bảng trò chơi

JavaScript đã hoàn thành trông như thế này

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
6

GHI CHÚ. Có nhiều cách sạch hơn, hiệu quả hơn để xây dựng mã này. Điêu nay bao gôm

  • Tạo một không gian tên hoặc đối tượng theo nghĩa đen để tổ chức mã tốt hơn
  • Bao bọc mọi thứ trong IIFE để tránh làm ô nhiễm không gian tên toàn cầu
  • Tạo một đoạn tài liệu và cập nhật đoạn này trong các vòng lặp for để tránh chi phí cập nhật DOM trên mỗi lần lặp lại

Tuy nhiên, bây giờ, chúng tôi sẽ giữ cho nó đơn giản

Tại thời điểm này, chúng tôi có bảng trò chơi được kết xuất với các ô nhưng chưa có chức năng kéo và thả và các con số không bị xáo trộn


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/d-scramble1. html

17. Thêm kéo và thả

Tiếp theo, chúng tôi cần đăng ký các sự kiện 

.dragging {
    background-color: yellow;
}
9, 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
0, 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
6, 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
8. Điều này sẽ cho phép chúng tôi xử lý từng sự kiện cần thiết để quản lý kéo và thả

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
7

Đối với 

.dragging {
    background-color: yellow;
}
9, chúng tôi tạo mã sau

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
8

Mã này tạo một biến 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
37 là trình bao bọc jQuery cho 
$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
0. Chúng tôi sử dụng nó để thêm một lớp 'được kéo' vào ô. Sau đó, chúng ta tạo một biến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
39 và gán cho biến đó giá trị của thuộc tính dữ liệu 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
40 của ô vuông gốc của ô

Cuối cùng, chúng tôi gán giá trị chuỗi của 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
39 cho đối tượng DataTransfer và đặt thuộc tính 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
02 thành 'move'

Tiếp theo, chúng tôi xử lý 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
0 bằng cách xóa lớp 'được kéo'. Sau đó, chúng tôi ngăn hành vi mặc định cho cả 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
44 và 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
7 cho phép chúng tôi thực hiện thao tác dra

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
9

Tiếp theo, chúng ta tạo hàm 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
46


    

        
1

    

    

        
2

    

    

        
3
0

Hàm này nhận một tham số sự kiện 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
47. Chúng tôi tạo một biến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
48 và sử dụng trình bao bọc jQuery cho 
$(document).ready(function() {
    $('#carList').on('dragstart', dragging);
    $('#favoriteCars').on('dragenter', preventDefault);
    $('#favoriteCars').on('dragover', preventDefault);
    $('#favoriteCars').on('drop', dropItem);
});

function dragging(e) {
    var val = e.target.dataset.value;
    e.originalEvent.dataTransfer.setData('text/plain', val);
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var data = e.originalEvent.dataTransfer.getData('text').split(',');
    if (data[0] === 'car') {
        var li = document.createElement('li');
        li.textContent = data[1];
        e.target.appendChild(li);
    }
}
0. Sau đó, chúng tôi kiểm tra xem phần tử mà sự kiện được đính kèm có một lớp gọi là 'hình vuông'. Nếu vậy, chúng ta đọc thuộc tính 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
40 và đặt giá trị vào biến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
51. Nếu vị trí đích không bằng ô trống có sẵn, chúng tôi thoát

Tiếp theo, chúng ta lấy 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
39 từ đối tượng DataTransfer và chuyển nó làm tham số cho lệnh gọi hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
53

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
53 trừ số ô vuông trống từ số ô vuông của vị trí nguồn. Sau đó, nó làm cho số nguyên dương và nếu chênh lệch giữa hai số là một (hình vuông liền kề) hoặc bốn (hình vuông trên hoặc dưới), thì hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
55 được gọi


    

        
1

    

    

        
2

    

    

        
3
1

Hàm 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
55 đã gán ngăn xếp nguồn (và tất cả các phần tử con của nó) cho biến 
var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
    $('.hole').on('dragenter', preventDefault);
    $('.hole').on('dragover', preventDefault);
    $('.hole').on('drop', dropItem);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}

function preventDefault(e) {
    e.preventDefault();
}

function dropItem(e) {
    var hole = $(e.target);
    if (hole.hasClass('hole') && hole.children().length === 0) {
        $draggedItem.detach();
        $draggedItem.appendTo(hole);
    }
}
4. Sau đó, nó sử dụng phương thức jQuery 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
58 để xóa phần tử ô vuông khỏi DOM


    

        
1

    

    

        
2

    

    

        
3
2

Sau đó, chúng tôi nhận được một tham chiếu đến hình vuông trống và gán nó cho biến 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
59. Sau đó, chúng tôi gọi hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
60 để hoàn thành việc di chuyển và cuối cùng, chúng tôi gán số ô vuông mới trống cho biến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
61

18. Đã hoàn tất thao tác kéo và thả

Đây là mã hoàn thành cho đến nay


    

        
1

    

    

        
2

    

    

        
3
3

Trò chơi tranh giành giờ đây sẽ có khả năng kéo và thả hoạt động


mẫu sống. https. //james-linh mục. github. io/node_samples/ch13-Drag-Drop/d-scramble2. html

19. Thêm điều khiển bàn phím

Để cung cấp phương pháp chơi trò chơi nhanh hơn và mượt mà hơn, chúng tôi cho phép người chơi sử dụng các phím mũi tên của bàn phím để di chuyển các ô

Chúng tôi làm điều này bằng cách kết nối một trình lắng nghe sự kiện 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
62 trên phần thân trang. Thao tác này khởi động hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
63 truyền cho nó đối tượng sự kiện với thông tin về khóa nào đã khởi động sự kiện. Chúng tôi chọn sử dụng 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
62 vì 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
65 không chụp các phím đặc biệt như Home, End, Delete, Insert, PgDown, PgUp, phím mũi tên, v.v. nhưng 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
62 thì có

Chúng tôi cũng sẽ hiển thị cho người dùng phím mũi tên nào đã được nhấn. Để làm điều này, chúng tôi cập nhật HTML của mình bằng một

có một 

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
3 của 'chìa khóa'. Chúng tôi cũng đặt 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
68 cho thuộc tính kiểu vì chúng tôi sẽ sử dụng jQuery để tạo hoạt ảnh cho thông báo này


    

        
1

    

    

        
2

    

    

        
3
4

Tiếp theo, chúng tôi sẽ thêm quy tắc vào biểu định kiểu của chúng tôi cho '#key'

.


    

        
1

    

    

        
2

    

    

        
3
5

Điều này đặt

hình nền để sử dụng 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
69 chứa hình ảnh cho mỗi phím mũi tên. Chúng tôi đặt 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
70 chính xác bằng một nửa kích thước thực của hình ảnh vì hình ảnh nút quá lớn

Kéo và thả HTML trò chơi

Chúng tôi cũng đặt

chiều rộng và chiều cao để mỗi lần chỉ hiển thị một hình ảnh mũi tên. Chúng tôi thực hiện việc này bằng cách điều chỉnh mã 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
71 dựa trên phím mũi tên được nhấn. Cuối cùng, chúng tôi đặt 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
72 và chỉ định vị trí liên quan đến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
73 và 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
74 hình ảnh sẽ xuất hiện

Tiếp theo, chúng tôi sửa đổi JavaScript của mình. Chúng tôi bắt đầu bằng cách đăng ký sự kiện 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
62. Chúng tôi làm điều này từ bên trong chức năng sẵn sàng cho tài liệu của jQuery


    

        
1

    

    

        
2

    

    

        
3
6

Tiếp theo chúng ta tạo hàm 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
63. Điều này tạo ra một biến 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
39 để theo dõi vị trí ô nguồn. Tiếp theo, chúng tôi thêm một câu lệnh 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
78 để nắm bắt phím mũi tên nào đã được nhấn. Nếu không có cái nào được nhấn, chúng ta có một trường hợp 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
79 trả về từ hàm


    

        
1

    

    

        
2

    

    

        
3
7

Trong mỗi câu lệnh tình huống, chúng tôi kiểm tra xem ô cuối cùng theo một hướng cụ thể đã được di chuyển chưa. Nếu vậy, chúng tôi thoát với lợi nhuận. Tiếp theo, chúng tôi xác định 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
39 dựa trên ô vuông trống cộng với hướng phím mũi tên. Sau đó, chúng tôi đặt quy tắc kiểu để nhắm mục tiêu đồ họa mũi tên phù hợp dựa trên phím mũi tên đã được nhấn

Cuối cùng, chúng tôi hiển thị phím được nhấn bằng cách xâu chuỗi một số phương thức hoạt hình jQuery. Cuối cùng, chúng tôi gọi 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
53 để thực hiện hoán đổi

20. Thêm mã xáo trộn gạch

Chúng tôi cũng sẽ tạo mã để tranh giành các ô

Chúng tôi sẽ cung cấp liên kết 'tranh giành' để cho phép người chơi thực hiện việc này từ trang trò chơi. Chúng tôi cập nhật HTML bằng cách thêm vào bên dưới

.


    

        
1

    

    

        
2

    

    

        
3
8

Tiếp theo, chúng tôi kết nối sự kiện 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
82 của liên kết từ bên trong chức năng sẵn sàng cho tài liệu jQuery


    

        
1

    

    

        
2

    

    

        
3
9

Nếu chúng ta muốn trò chơi bắt đầu ở trạng thái tranh giành, chúng ta cũng có thể bỏ ghi chú lệnh gọi hàm 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
83. Tiếp theo chúng ta tạo hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
83

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
0

Chức năng này thực hiện một vòng lặp gồm 128 chuyển động ngẫu nhiên để xáo trộn các ô. Mỗi khi vòng lặp thực thi, một số ngẫu nhiên mới được tạo và dựa trên giá trị của nó, một ô liền kề được chuyển sang một ô vuông trống

21. Thêm kiểm tra chiến thắng

Đầu tiên, chúng tôi thêm một cuộc gọi đến 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
85 vào cuối hàm 
body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
53. Nó sẽ giống như thế này

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
1

Tiếp theo chúng ta thêm hàm 

body {
    display: flex;
    justify-content: center;
}
#container {
    border: solid;
    width: 332px;
    height: 332px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
.hole {
    background-color: black;
    border: 1px pink solid;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item {
    font-size: 128px;
    font-family: Arial, Helvetica, sans-serif;
    width: 140px;
    height: 140px;
    background-color: #C0C0C0;
    color: #FFF;
    text-align: center;
    user-select: none;
}
85 sau

var $draggedItem;

$(document).ready(function() {
    $('.item').on('dragstart', dragging);
    $('.item').on('dragend', draggingEnded);
});

function dragging(e) {
    $(e.target).addClass('dragging');
    $draggedItem = $(e.target);
}

function draggingEnded(e) {
    $(e.target).removeClass('dragging');
}
2

Điều này sẽ kiểm tra xem hình vuông cuối cùng có trống không. Nếu không, chúng tôi thoát. Tiếp theo, chúng tôi lặp qua từng ô và kiểm tra xem số ô vuông và số ô có khớp không (e. g. ô 1 ở ô 1, ô 2 ở ô 2, v.v. ). Nếu các số không khớp, chúng tôi thoát

cách kéo

kéo và thả HTML sử dụng mô hình sự kiện DOM và kéo các sự kiện kế thừa từ sự kiện chuột . Thao tác kéo điển hình bắt đầu khi người dùng chọn một phần tử có thể kéo, kéo phần tử đó vào phần tử có thể kéo xuống, sau đó thả phần tử được kéo.

Cái gì có thể kéo được trong HTML?

Thuộc tính chung có thể kéo là thuộc tính liệt kê cho biết liệu phần tử có thể được kéo hay không, bằng hành vi trình duyệt gốc hoặc API kéo và thả HTML. The draggable attribute may be applied to elements that strictly fall under the HTML namespace, which means that it cannot be applied to SVGs.

programming html

Bài Viết Liên Quan

Tiến trình lịch sử việt nam tiếng anh là gì năm 2024
Tiến trình lịch sử việt nam tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Giải bài tập tiếng anh lớp 7 unit 7 năm 2024
Giải bài tập tiếng anh lớp 7 unit 7 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Tiếng anh
Đối tượng khách thể phạm vi nghiên cứu là gì năm 2024
Đối tượng khách thể phạm vi nghiên cứu là gì năm 2024

là ai Hỏi Đáp Là gì Khoa Học Nghiên cứu
Giải đề toán tuyển sinh lớp 10 năm 2023 năm 2024
Giải đề toán tuyển sinh lớp 10 năm 2023 năm 2024

mẹo hay
Đất nước thái lan được mệnh danh là gì năm 2024
Đất nước thái lan được mệnh danh là gì năm 2024

là ai Hỏi Đáp Là gì
Bác sĩ chuyên khoa tiêu hóa ở tphcm năm 2024
Bác sĩ chuyên khoa tiêu hóa ở tphcm năm 2024

mẹo hay
492 bài toán quan hệ vuông góc 11 năm 2024
492 bài toán quan hệ vuông góc 11 năm 2024

mẹo hay Toanmath THCS
Chất chống oxy hoá là gì năm 2024
Chất chống oxy hoá là gì năm 2024

là ai Hỏi Đáp Là gì
Bài tập về hình thang lớp 5 violet năm 2024
Bài tập về hình thang lớp 5 violet năm 2024

mẹo hay Khỏe Đẹp Bài tập
Các hàm excel sử dụng trong kế toán năm 2024
Các hàm excel sử dụng trong kế toán năm 2024

mẹo hay Hơn
Bài văn tả về ước mơ của em lớp 5 năm 2024
Bài văn tả về ước mơ của em lớp 5 năm 2024

mẹo hay
Lá mơ còn gọi là lá gì năm 2024
Lá mơ còn gọi là lá gì năm 2024

là ai La mơ trơn La mơ xanh La mơ trắng
Có những hình thức đào tạo bồi dưỡng nào năm 2024
Có những hình thức đào tạo bồi dưỡng nào năm 2024

mẹo hay
Đầu số 0857 là mạng gì năm 2024
Đầu số 0857 là mạng gì năm 2024

là ai 0867 lừa đảo
Khắc phục lỗi server error 550 authentication ở outlook năm 2024
Khắc phục lỗi server error 550 authentication ở outlook năm 2024

mẹo hay 550 5.7 1
3 dấu gạch ngang trên website là gì năm 2024
3 dấu gạch ngang trên website là gì năm 2024

là ai Hỏi Đáp Là gì
Ôn thi học kì 1 lớp 10 toán năm 2024
Ôn thi học kì 1 lớp 10 toán năm 2024

mẹo hay Học Tốt Học
Da bò sát khác với da ếch như thế nào năm 2024
Da bò sát khác với da ếch như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
Chuyên viên tư vấn tuyển dụng tiếng anh là gì năm 2024
Chuyên viên tư vấn tuyển dụng tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Recruitment Specialist Hr là gì
Cách hạch toán của hóa đơn chi hộ năm 2024
Cách hạch toán của hóa đơn chi hộ năm 2024

mẹo hay Mẹo Hay Cách

Quảng Cáo

Có thể bạn quan tâm

Lỗi archive is either in unknown format or damaged năm 2024
1 ngày trước . bởi AdrenalWithholding
Ngày 043 04 là ngày gì o phần lan năm 2024
1 ngày trước . bởi DaintyEnvironment
Bài tập cuối tuần lớp 4 tuần 10 năm 2024
1 ngày trước . bởi GuardedArchipelago
Đề thi vào lớp 10 môn toán thanh hóa 2023 năm 2024
1 ngày trước . bởi Half-nakedEmbodiment
Lỗi ket noi sql server bằng window authorization năm 2024
1 ngày trước . bởi BountifulFriendliness
Giám sát thường xuyên là gì năm 2024
1 ngày trước . bởi SubatomicConduit
2.2.3 quản lý lỗi và thu dọn rác năm 2024
1 ngày trước . bởi RockingAmbulance
Bú fame có nghĩa là gì năm 2024
1 ngày trước . bởi DevotedEquator
Cao nguyên đá đồng văn cách hà nội bao xa năm 2024
1 ngày trước . bởi UselessPendulum
Lowongan kerja head cmo at pt top finance năm 2024
1 ngày trước . bởi AdvisableUnderdog

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Văn phòng hà sơn hải vân ở hà nội năm 2024
1 tuần trước . bởi RestoredEmbroidery
Lỗi alt click to define trên photoshop có nghĩa gì năm 2024
6 ngày trước . bởi SurroundingDoorway
Trưởng ban dân vận tỉnh ủy tiếng anh là gì năm 2024
4 ngày trước . bởi ReluctantRegularity
Bài tập trắc nghiệm amino axit có đáp án năm 2024
1 tuần trước . bởi EnthusiasticRodeo
Lỗi khi cài win 7 require cd từ usb năm 2024
5 ngày trước . bởi ImprisonedMishap
31 10 11 đến chơi nào eunhyuk donghae full năm 2024
5 ngày trước . bởi AbdominalHegemony
Chữ c trên công tơ điện là gì năm 2024
1 ngày trước . bởi AshenRecipe
Cua sốt trứng muối tiếng anh là gì năm 2024
2 ngày trước . bởi AssociatedContractor
Thư giãn đầu óc tiếng anh là gì năm 2024
1 tuần trước . bởi DivingTwenties
Giải vở bài tập toán lớp 5 bài 168 năm 2024
3 ngày trước . bởi LegislativeRefrigerator

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.