Helpex - Trao đổi & giúp đỡ Đăng nhập

Sử dụng HTML5 để thêm nội dung kéo và thả vào trang web của bạn

Trong hướng dẫn này, chúng ta sẽ thấy cách chúng ta có thể sử dụng chức năng Kéo và Thả trong HTML5. Điều này sẽ cho phép người dùng cuối kéo nội dung của trang web, điều chỉnh giao diện theo sở thích của họ. Mã trong hướng dẫn này bao gồm cả CSSHTML5 .
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    #div1 {width:336px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    #div2 {
    width: 336px;
    height: 69px;
    border:1px solid #aaaaaa;
    -webkit-border-radius: 1050px;
    -moz-border-radius: 1050px;
    border-radius: 50px;
    }
    #div3 {
    width: 100px;
    height: 100px;
    border:1px solid #aaaaaa;
    -webkit-border-radius: 1050px;
    -moz-border-radius: 1050px;
    border-radius: 50px;
    }
    </style>
    <script type="text/javascript">
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev)
    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    }
    </script>
    </head>
    <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="mountain" src="mountain.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
    <img id="circle" src="Circle.png" draggable="true" ondragstart="drag(event)">
    <img id="RoundedRectangle" src="RoundedRectangle.png" draggable="true" ondragstart="drag(event)">
    </body>
    </html>

CSS:

Trong đoạn mã trên, ba lớp CSS được sử dụng để vẽ Hình chữ nhật, Hình chữ nhật trònHình tròn .

JavaScript:

Trong phần Javascript, chúng ta có ba hàm allowdrop () , drag () , drop ().

Trên thuộc tính ondragstart của mỗi hình ảnh, hàm  kéo () được gọi để sử dụng để xác định Kiểu dữ liệu và Giá trị của mục có thể kéo.

Trong các thẻ div, bạn có thể thấy hai hàm được gọi là allowdrop ()drop () . Hàm allowdrop () được gọi tại thuộc tính ondragover của mỗi thẻ div trong hàm này ev.preventDefault (); được gọi để bảo vệ hành vi mặc định của sự kiện xảy ra và hàm thả được gọi tại thuộc tính ondrop của mỗi thẻ div được sử dụng để lấy dữ liệu của mục được kéo, Trong đoạn mã trên đã kéo dữ liệu có Id  div1, div2 và div3 tương ứng sau đó  target.appendChild () sẽ Nối phần tử được kéo vào phần tử drop một lần nữa ev.preventDefault () được sử dụng để bảo vệ sự kiện mặc định của mục được kéo xảy ra.

Trong mỗi thẻ hình ảnh ở trên, bạn có thể thấy rằng thuộc tính có thể kéo được đặt thành đúng, điều đó có nghĩa là mục này có thể kéo được.

Đối với bản demo trực tiếp, nhấp vào liên kết này

Lưu ý: Sự kiện mặc định là mở mục được kéo dưới dạng liên kết.

4 hữu ích 0 bình luận 3.0k xem chia sẻ

Có thể bạn quan tâm

loading