HTML5 拖拽

1.两个div中进行图片来回拖拽切换，直接上代码:

样式css

<style>
        #div1, #div2 {
            width: 400px;
            height: 300px;
            border: 1px solid green;
        }

        #div2 {
            border: 1px solid red;
        }

 </style>

 DOM

<div id="div1" ondragover="onDragOver(event)" ondrop="onDrop(event)">

</div>
<br>

<div id="div2" ondragover="onDragOver(event)" ondrop="onBackDrop(event)">
    <img id="img1" src="../images/gif.gif" draggable="true" ondragstart="onDragStart(event)"/>
</div>

JS

<script>
    function onDragStart(e) {
        e.dataTransfer.setData("text", e.target.id)
    }

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

    function onDrop(e) {
        e.preventDefault();
        e.target.appendChild(document.getElementById(e.dataTransfer.getData("text")));
    }

    function onBackDrop(e) {
        e.preventDefault();
        e.target.appendChild(document.getElementById(e.dataTransfer.getData("text")));
    }
</script>

2.注意几点：

a.函数名不能跟事件名一样，否则拖拽的时候会报错：如图

 

b. onDragOver等事件名在dom中带的入参event不能改成e，否则拖拽也会报错，如图：

onBackDrop事件 可改成 onDrop，

以上测试只在谷歌41版本上测试。