html5拖拽控件，html在線拖拽環繞,用HTML5原生實現拖放或排序

原生拖放

拖放是一種很常見的功能，現在這個功能已經成為Html5標準的一部分。通過html5只需要簡單幾行代碼即可實現拖放，比如下面這個例子，你可以將此圖片上下拖放。

示例代碼

function allowDrop(ev) {

ev.preventDefault();

html5拖拽控件、}

function drag(ev) {

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

}

function drop(ev) {

ev.preventDefault();

js實現div拖動。var data = ev.dataTransfer.getData("text");

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

}

代碼步驟

第一步：　要讓一個元素可拖放

需要設置 draggable 屬性

vue拖拽排序、第二步：　拖放什么

在　ondragstart　事件中通過　dataTransfer.setData 設置拖放的元素function drag(ev) {

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

}

在這種情況下，是通過傳遞被拖放對象的ID來操作的，所以類型是"text"

第三步: 拖放到什么地方

HTML5拖放，通過 ondragover實現，　通常情況下，元素可能會被拖放到其它地方，當一個容器允許放置時，只需要在ondragover事件中　preventDefault　即可

function allowDrop(ev) {

ev.preventDefault();

}

第四步：　放置

在drop事件中將對象"轉移"到容器中function drop(ev) {

html怎么讓div可以移動、ev.preventDefault();

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

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

}

這里通過appendChild實現轉移拖放對象，同理可通過放置在不同位置實現排序。

相關事件

html列表如何橫向排列，在拖放對象上觸發的事件

ondragstart - 當用戶開始拖放時

ondrag - 當用戶正在拖放時

ondragend - 當用戶拖放結束時

在放置對象(容器)上觸發的事件

ondragenter -　當拖放對象進入容器時(首次)

html排序標簽、ondragover -　　當拖放對象經過容器時

ondragleave -　當拖放對象離開窗口時

ondrop - 當拖放對象釋放到容器中時

DataTransfer

標準屬性

DataTransfer.dropEffect 拖放的操作類型：　copy、move、link 或 none　(復制、移動創建鏈接等)

前端拖拽自動生成html的框架。DataTransfer.effectAllowed 播放允許的類型：　比如有些容器只能復制，有些只允許移動等

DataTransfer.files　存放一些拖放的本地文件，如果沒有拖放文件，則此列表為空

DataTransfer.items 只讀 DataTransferItemList 對象

DataTransfer.types 只讀　dragstart事件中指定的拖放類型

標準方法

DataTransfer.clearData()　　清除指定類型的拖放數據

html嵌套列表。DataTransfer.getData()　　　　獲取指定類型的數據

DataTransfer.setData()　　　　設置指定類型的數據

DataTransfer.setDragImage()　　設置拖放時的自定義圖標

支持：　IE9及以上

參考：