Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : chức năng kéo và thả

Trong bài viết này, chúng ta sẽ biết về chức năng Kéo HTML & amp; Drop , cũng hiểu cách triển khai của nó với sự trợ giúp của các ví dụ.

Kéo và thả là một khái niệm rất tương tác và thân thiện với người dùng, giúp di chuyển một đối tượng đến một vị trí khác dễ dàng hơn bằng cách nắm lấy nó. Điều này cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo phần tử đó đến vị trí khác và thả nút chuột để thả phần tử đó. Trong HTML 5, Kéo và Thả dễ viết mã hơn nhiều và bất kỳ phần tử nào trong đó đều có thể kéo được.

Sự kiện Kéo và Thả: Có nhiều sự kiện Kéo và Thả, một số được liệt kê bên dưới:

  • ondrag: Đó là được sử dụng để sử dụng khi phần tử hoặc lựa chọn văn bản đang được kéo trong HTML.
  • ondragstart : Được sử dụng để gọi một hàm, kéo (sự kiện) , chỉ định dữ liệu nào sẽ được kéo.
  • ondragenter : Nó được sử dụng để xác định xem mục tiêu giảm có chấp nhận thả hay không. Nếu sự kiện này được chấp nhận, thì sự kiện này phải bị hủy.
  • ondragleave : Sự kiện xảy ra khi chuột rời khỏi một phần tử trước khi một phần tử hợp lệ thả mục tiêu trong khi quá trình kéo đang diễn ra.
  • ondragover : Nó chỉ định nơi có thể thả dữ liệu đã kéo.
  • ondrop : Nó chỉ định vị trí xảy ra sụt khi kết thúc thao tác kéo.
  • ondragend : Nó xảy ra khi người dùng kéo xong một phần tử.

Quy trình Kéo và Thả:

  • Bước 1: Đặt một đối tượng có thể kéo được
    • Trước tiên, hãy đặt thuộc tính có thể kéo thành true để phần tử đó có thể kéo được & lt; img draggable = “true” & gt;
    • Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo. Thuộc tính gọi một hàm, kéo (sự kiện), chỉ định dữ liệu nào sẽ được kéo. Phương thức dataTransfer.setData () đặt kiểu dữ liệu và giá trị của dữ liệu được kéo
    • Trình xử lý sự kiện sẽ đặt các hiệu ứng được phép (sao chép, di chuyển, liên kết hoặc một số kết hợp).
    • < / ul>

    • Bước 2: Thả đối tượng
      • Sự kiện chỉ định nơi dữ liệu được kéo có thể được thả. Theo mặc định, không thể bỏ dữ liệu / phần tử trong các phần tử khác. Để cho phép giảm, nó phải ngăn việc xử lý mặc định của phần tử. Điều này được thực hiện bằng cách gọi phương thức event.preventDefault ()
      • Cuối cùng là sự kiện drop, cho phép thực hiện drop thực tế

    < p> Ví dụ 1: Ví dụ này hiển thị thao tác kéo & amp; thả hình ảnh trong HTML.

    HTML

    < p>

    & lt ;! DOCTYPE HTML & gt;

    & lt; html < code class = "trơn"> & gt;

    & lt; head & gt;

    & lt; style & gt;

    # getData {

    wi dth: 250px;

    height: 200px;

    padding: 10px;

    border: 1px solid # 4f4d4d;

    }

    < code class = "undefined space"> & lt; / style & gt;

    & lt; script & gt;

    < p class = "line number13 index12 alt2"> function allowDrop (Even) {

    Even.preventDefault ();

    }

    chức năng kéo (chẵn) {

    Even.dataTransfer.setData (" text ", Even.target.id);

    }

    thả chức năng (thậm chí) {

    Even.preventDefault ();

    var fetchData = Even.dataTransfer.getData ("text");

    Even.target.appendChild (document.getElementById (fetchData));

    }

    & lt; / script & gt;

    & lt; / head & gt;

    & lt; body & gt;

    & lt; h3 & gt; Kéo Hình ảnh GeekforGeeks thành hình chữ nhật: & lt; / h3 & gt;

    & lt; div id = " getData "

    ondrop = "drop (sự kiện) "

    ondragover = " allowDrop (event) " & gt;

    & lt; / div & gt;

    & lt; br & gt;

    & lt; img id = "dragData"

    src = "gfg.png"

    kéo được = "true"

    ondragstart = "drag (event)"

    width = "250"

    height = "200" & gt;

    & lt ; / body & gt;

    & lt; / html & gt;

     
     

    Đầu ra:

    Đối tượng truyền dữ liệu: Thuộc tính truyền dữ liệu được sử dụng khi toàn bộ quá trình Kéo và Thả diễn ra. Nó được sử dụng để giữ dữ liệu được kéo từ nguồn và thả nó đến vị trí mong muốn. Đây là các thuộc tính được liên kết với nó:

    • dataTransfer.setData (định dạng, dữ liệu) : Được sử dụng để đặt dữ liệu được kéo.
    • < li> dataTransfer.clearData (định dạng): Nó được sử dụng để gọi hàm này mà không có đối số xóa tất cả dữ liệu. Việc gọi nó bằng một đối số định dạng sẽ chỉ xóa dữ liệu cụ thể đó.

    • dataTransfer.getData (định dạng): Nó trả về dữ liệu có định dạng được chỉ định. Nếu không có dữ liệu như vậy, hãy trả về chuỗi trống.
    • dataTransfer.types: Thuộc tính này trả về một mảng gồm tất cả các định dạng đã được đặt trong sự kiện dragstart.
    • dataTransfer.files : Nó được sử dụng để trả về tất cả các tệp sẽ bị xóa.
    • dataTransfer.setDragImage (element, x, y): Nó được sử dụng để hiển thị hình ảnh hiện có dưới dạng hình ảnh kéo thay vì hình ảnh mặc định dọc theo con trỏ. Tọa độ chỉ định vị trí thả.
    • dataTransfer.addElement (phần tử): Nó được sử dụng để thêm phần tử đã chỉ định để vẽ dưới dạng hình ảnh phản hồi kéo.
    • < li> dataTransfer.effectAllowed (value): Nó sẽ cho trình duyệt biết rằng chỉ (các) loại hoạt động được liệt kê mới được phép cho người dùng. Thuộc tính có thể được đặt thành các giá trị sau: none, copy, copyLink, copyMove, link, linkMove, chuyển, tất cả và chưa khởi tạo.

    • dataTransfer.dropEffect (value): Nó được sử dụng để kiểm soát phản hồi mà người dùng được cung cấp trong các sự kiện dragenter và dragover. Khi người dùng di chuột qua một phần tử mục tiêu, con trỏ của trình duyệt sẽ cho biết loại hoạt động nào sẽ diễn ra (ví dụ: một bản sao, một lần di chuyển, v.v.). Hiệu ứng có thể nhận một trong các giá trị sau: không có, sao chép, liên kết, di chuyển.

    Ví dụ 2: Ví dụ này minh họa việc sử dụng thuộc tính của phần tử.

    HTML


    & lt;! DOCTYPE HTML & gt;

    & lt; html & gt;

    & lt; head & gt;

    & lt; title & gt; Kéo và Thả hộp & lt; / title & gt;

    < / code> & lt; script & gt;

    function allowDrop (ev) {

    ev.preventDefault ();

    }

    function dragStart (ev) {

    ev.dataTransfer.setData (" text ", ev.target.id);

    < p class = "line number13 index12 alt2"> }

    function dragDrop (ev) {

    ev.preventDefault ();

    var data = ev.dataTransfer.getData ("text");

    ev.target.appendChild (document.getElementById (data));

    }

    & lt; / script & gt;

    & lt; style & gt;

    # box {

    margin: auto;

    width: 50%;

    height: 200px;

    border: 3px màu xanh lục đặc;

    padding: 10px;

    }

    # box1, < / code>

    # box2,

    # box3 {

    float: left;

    margin: 5px;

    padding: 10px;

    }

    # box1 {

    < code class = "undefined space"> width: 50px;

    height: 50px;

    background-color: # F5B5C5;

    }

    # box2 {

    width: 100px;

    height: 100px;

    background-color: # B5D5F5;

    }

    # box3 {

    width: 150px;

    height: 150px;

    background-color: # BEA7CC;

    }

    p {

    font-size: 20px;

    font-weight: bold;

    text-align: center;

    }

    . gfg {

    < code class = "undefined space"> font-size: 40px;

    color: # 009900;

    < / code> font-weight: bold;

    < code class = "trơn"> text-align: center;

    }

    & lt; / style & gt;

    & lt; / head & gt;

    & lt; body & gt;

    & lt; div class = "gfg"

    & lt; p & gt; Kéo và thả các hộp & lt; / p < code class = "trơn"> & gt;

    & lt; div id < / code>

    & lt; div id = " box1 " < code class = "color1"> kéo được = "true"

    ondragstart = " dragStart (sự kiện) " & gt;

    & lt; / div & gt;

    & lt; div id = "box2 " kéo được = " true "

    ondragstart = "dragStart (event)" & gt;

    & lt; / div & gt;

    & lt; div id = "box3" ondrop = "dragDrop (event)"

    ondragover = "allowDrop (event)" & gt;

    & lt; / div & gt;

    & lt; / div & gt;

    & lt; / body & gt;

    & lt; / < code class = "keyword"> html & gt;

     
     

    Giải thích:

    • Bắt đầu kéo bằng đặt thuộc tính có thể kéo của phần tử được kéo thành true.
    • Lấy dữ liệu được kéo bằng phương thức này. Phương thức này sẽ trả về bất kỳ dữ liệu nào được đặt thành cùng kiểu trong phương thức.
    • Gọi phương thức để cho phép loại bỏ các phần tử trong các phần tử khác bằng cách ngăn việc xử lý mặc định của phần tử.
    • Phần tử được lưu trữ trong dữ liệu biến mà chúng tôi thêm vào phần tử drop.

    Đầu ra:

    Ví dụ 3: Ví dụ này minh họa hình ảnh kéo và thả.

    HTML

    < br />

    & lt;! DOCTYPE HTML & gt;

    & lt; html & gt;

    & lt; head & gt;

    & lt; script < code class = "trơn"> & gt;

    hàm allowDrop (ev) {

    ev.preventDefault () ;

    }

    function dragStart ( ev) {

    ev.dataTransfer.setData (" text ", ev.target.id);

    }

    < / p>

    hàm dragDrop (ev) {

    < p class = "line number14 index13 alt1"> ev.preventDefault ();

    var data = ev.dataTransfer.getData (" text ");

    < p class = "line number16 index15 alt1"> ev.target.appendChild (document.getElementById (data)); < / p>

    }

    & lt; / script & gt;

    & lt; style & gt;

    < code class = "undefined space"> . div1 {

    width: 240px;

    < code class = "trơn"> height: 75px;

    padding: 10px;

    border: 1px solid black ;

    background-color: # F5F5F5;

    < p class = "line number26 index25 alt1"> }

    p {

    font-size: 20px;

    font-weight: bold;

    }

    . gfg {

    font-size: 40px;

    color: # 009900;

    < code class = "trơn"> font-weight: bold;

    }

    & lt; / style & gt;

    & lt; / head & gt;

    & lt; body & gt;

    & lt; div class = "gfg"

    & lt; p & gt; Kéo và Thả Hình ảnh vào các hộp & lt; / p & gt;

    & lt; div < code class = "color1"> class = "div1"

    ondrop = " dragDrop (sự kiện) "

    ondragover < / code> = "allowDrop (event)" & gt;

    & lt; img < / code> id = "drag1"

    src =

    " https://media.geeksforgeeks.org/wp-content/cdn-uploads /Geek_logi_-low_res.png"

    kéo được = "true"

    ondragstart = " dragStart (sự kiện) "

    width = "220"

    < code class = "color1"> height < mã class = "trơn"> = "70" & gt;

    & lt; / div & gt;

    & lt; < / code> br & gt;

    & lt; div class = "div1"

    ondrop = "dragDrop (sự kiện)"

    ondragover = "allowDrop (event)" & gt;

    & lt; / div & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Đầu ra:

    Ví dụ 4: < / strong> Ví dụ này minh họa cách kéo văn bản trong hộp chữ nhật trong HTML.

    HTML

    & lt;! DOCTYPE HTML & gt;

    & lt; html & gt;

    & lt; head & gt;

    & lt; title & gt; Draggable Text & lt ; / title & gt;

    & lt; style & gt;

    . dropbox {

    < / code> width: 350px;

    height: 40px;

    padding : 15px;

    border: 1px solid # 292828;

    }

    < p class = "line number12 index11 alt1">

    h1 {

    color: green;

    }

    & lt; / style & gt;

    & lt; script & gt;

    function droppoint (event) {

    var data = event.dataTransfer.getData (" Text ");

    event.target.appendChild (document.getElementById (data));

    < p class = "số dòng21 i ndex20 alt2 "> event.preventDefault ();

    }

    function allowDropOption (event) {

    event.preventDefault ();

    }

    chức năng dragpoint (sự kiện) {

    event.dataTransfer.setData ("Văn bản", event.target.id);

    }

    & lt; / script & gt;

    & lt; / head & gt;

    & lt; body & gt;

    & lt; center & gt;

    & lt; h1 & gt; GeeksforGeeks & lt; / h1 & gt ;

    & lt; h3 & gt; Kéo văn bản trong hình chữ nhật & lt; / h3 & gt;

    & lt; div class = "dropbox "

    ondrop = "droppoint (event)"

    ondragover = "allowDropOption (event)" & gt;

    & lt; / div < code class = "trơn"> & gt;

    & lt ; p id = " drag1 "

    kéo được = "true"

    ondragstart = " dragpoint (event) " & gt;

    < code class = "undefined space"> GeeksforGeeks: Cổng khoa học máy tính dành cho những người yêu thích máy tính.

    & lt; / p & gt; < / code>

    & lt; / center & gt; < / code>

    & lt; / body & gt;

    & lt; / html < / code> & gt;

      
     

    Đầu ra:

    Trình duyệt được hỗ trợ:

    • Google Chrome 93.0 < / li>
    • Microsoft Edge 93.0
    • Firefox 92.0
    • Opera 78.0
    • Safari 14.1

    Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề chức năng kéo và thả

Hướng dẫn sử dụng chức năng kéo thả tùy biến trên trang giao dịch MBS S24

alt

  • Tác giả: Chứng khoán MB (MBS)
  • Ngày đăng: 2021-11-14
  • Đánh giá: 4 ⭐ ( 7473 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kéo thả tùy biến là một chức năng đặc biệt hỗ trợ Nhà đầu tư chuyên nghiệp tạo ra một bảng thông tin theo ý muốn của mình. Cùng xem cách sử dụng chức năng Kéo thả tùy biến qua video clip sau.

    Truy cập S24 tại đây: https://s24.mbs.com.vn

Cách bật tính năng kéo thả trên thanh taskbar Windows 11

  • Tác giả: trainghiemso.vn
  • Đánh giá: 5 ⭐ ( 3738 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thực hiện việc này, bạn cần một công cụ đơn giản của bên thứ ba để cho phép các ứng dụng khi bạn thả tệp vào đó. Hiện tại, nó không hỗ trợ ghim các mục

Sử dụng tính năng kéo thả vào thanh taskbar trên Windows 11

  • Tác giả: thuthuatplus.com
  • Đánh giá: 3 ⭐ ( 6473 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn muốn sử dụng tính năng kéo thả vào thanh taskbar trên Windows 11, giống như trên Windows 10 nhưng lại không thực hiện? Dưới đây là cách để mang tính năng này trở lại với Windows 11 nếu bạn cần.

#1 Kéo và thả dễ dàng hơn bằng DropPoint cho Windows PC

  • Tác giả: thuthuat.edu.vn
  • Đánh giá: 3 ⭐ ( 5956 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ThuThuat.edu.vn vừa chia sẻ "Kéo và thả dễ dàng hơn bằng DropPoint cho Windows PC" ✅ Đầy đủ thông tin chính xác nhất ✅ Xem Ngay Nhé !!!

Cách Tạo Chức Năng Drag And Drop Và 18 Ví Dụ Thực Tế Trong thiết Kế Web

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 8816 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo chức năng Drag and Drop (Kéo và Thả) Cho Trang Web bằng HTML, CSS và Javascript nhé!

Cách mở tính năng Kéo thả file – Drag & Drop trên Windows 11

  • Tác giả: anonyviet.com
  • Đánh giá: 4 ⭐ ( 1172 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách mở tính năng kéo thả vào thanh Taskbar Windows 11. Enable Drag & Drop Taskbar Windows 11 thành công

Sử dụng tính năng kéo thả vào thanh taskbar trên Windows 11

  • Tác giả: fptshop.com.vn
  • Đánh giá: 5 ⭐ ( 4462 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn muốn sử dụng tính năng kéo thả vào thanh taskbar trên Windows 11, giống như trên Windows 10 nhưng lại không thực hiện? Dưới đây là cách để mang tính năng này trở lại với Windows 11 nếu bạn cần.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Khám phá phương pháp hiển thị kiểu JavaScript với các ví dụ - javascript thêm kiểu hiển thị không có

By ads_php