如何用html實現元素拖放

HTML5新增了拖放的api，指的是抓取一個物體放置在一個容器中。注重：任何物體都可以被拖放

東西/原料

1
起首我們搭建一個html框架，元素至少需要有兩個：
1.拖放的物體id
2.放置的容器id（可多個）
2
其次是編寫在拖放物體id的事務處置：
ondragstart事務：
ondragstart 屬性挪用了一個 drag(event) 函數，劃定拖動什么數據。
dataTransfer.setData() 方式設置被拖動數據的數據類型和值
在這個例子中，數據類型是text，值是它的id
3
其次是編寫放置容器id的事務處置：
1.ondragover事務：
這個事務劃定數據能被拖放到何處的規模，拖拽到規模內的時辰會呈現許可的手勢。這個例子中綁心猿意馬了allowDrop時候，本家兒要使命在于阻止默認行為，良多人不懂，其實是必需的，因為自己默認是阻止放置物體的，所以要阻止默認行為
4
續上：
2.ondrop時候：
當鋪開拖放數據的時辰，會觸發這個事務，我們綁心猿意馬了一個函數drop，函數內需要執行：
阻止默認行為->getData獲取數據類型->把被拖元素追加到容器內
5
運行代碼結果：