說到拖動，大概有兩種方式，一種是js實現，之前已經介紹過，今天來講解另外一種方式，那就是使用html5實現拖動。

css樣式

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
}

.box2 {
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border: 1px solid #aaa;
}

html結構

<div  class="box" ondrop="drop(event)" ondragover="dropover(event)"
 
>
    <img id="box" src="img/1.jpg" ondragstart="dragstart(event)" draggable="true" width="180" />
</div>

<div class="box2" ondrop="drop(event)" ondragover="dropover(event)"></div>

js代碼

function dropover(e) {
    e.preventDefault();
}

function dragstart(e) {

    e.dataTransfer.setData(
 
"Text", e.target.id);
}

function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));
}

拖動什麽 - ondragstart 和 setData()

然後，規定當元素被拖動時，會發生什麽。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值：

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

進行放置 - ondrop

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

html5拖拽初窺