html5拖拽初窥

说到拖动，大概有两种方式，一种是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)：