這篇文章主要介紹HTML5中如何實現(xiàn)拖放，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、江口網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為江口等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

關(guān)于HTML5中的拖放

拖放（Drag 和 Drop）是一種常見的特性，即抓取對象以后拖到另一個位置，在 HTML5 中，拖放是標(biāo)準(zhǔn)的組成部分。在HTML5中用戶可以使用鼠標(biāo)選擇一個可拖動元素，將元素拖動到一個可放置元素，并通過釋放鼠標(biāo)按鈕放到這些元素。在拖動操作期間，可拖動元素的半透明表示跟隨鼠標(biāo)指針。

如果我們希望元素可以被拖動，那么需要將其 draggable屬性設(shè)為true (a標(biāo)簽draggable默認(rèn)是true)

拖放的事件

在進行拖放操作的不同階段會觸發(fā)數(shù)種事件，拖拽事件的dataTransfer屬性存放了拖放操作中的相關(guān)數(shù)據(jù)。

(在拖拽的時候只會觸發(fā)拖拽的相關(guān)事件，鼠標(biāo)事件，例如mousemove，是不會觸發(fā)的）

DataTransfer 對象

在處理拖放操作時，我們需要用到 DataTransfer 對象來保存被拖動的數(shù)據(jù)。 DataTransfer 可以保存一項或多項數(shù)據(jù)、一種或者多種數(shù)據(jù)類型。
屬性

方法

瀏覽器支持

Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5+

演示代碼

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #ccccff;
    background-color: #ccccff;
    text-align: center;
    line-height: 100px;
}
.bin {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #ccccff;
    overflow: hidden;
    float: left;
}



    
        
            可拖拽元素

        

         

    

    
        var bins = document.querySelectorAll('.bin');
        var boxs = document.querySelectorAll('.box');
        var drag = null;
        for (var i = 0; i < boxs.length; i++) {
            var box = boxs[i];
            box.onselectstart = function() {
                return false;
            };
            box.ondragstart = function(e) {
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', e.target.outerHTML);
                e.dataTransfer.setDragImage(e.target, 0, 0);
                drag = this;
                return true;
            };
            box.ondragend = function(e) {
                drag = null;
                return false
            };
        }
        for (var i = 0; i < bins.length; i++) {
            var bin = bins[i];
            //當(dāng)拖曳元素進入目標(biāo)元素
            bin.ondragover = function(e) {
                e.preentDefault();
                return true;
            };
            //拖拽元素在目標(biāo)元素上移動
            bin.ondragenter = function(e) {
                this.style.backgroundColor = '#eeeeff';
                return true;
            };
            //拖拽元素在目標(biāo)元素上離開
            bin.ondragleave = function(e) {
                this.style.backgroundColor = '#fff';
                return true;
            };
            //拖拽的元素在目標(biāo)元素上同時鼠標(biāo)放開
            bin.ondrop = function(e) {
                if (drag) {
                    drag.parentNode.removeChild(drag);
                    this.appendChild(drag);
                }
                this.style.backgroundColor = '#fff';
                return false;
            };
        }
        document.body.ondrop = function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    

以上是“HTML5中如何實現(xiàn)拖放”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！