一、设置元素为可拖放

<img draggable="true">

二、拖动什么- ondragstart 和 setData()

拖动什么，就给什么绑定拖动开始的事件（ondragstart）和设置拖动的数据(setData)

<img draggable="true" ondragstrat="drag(event)">

<script>
    function drag(ev){
        // 设置拖放的数据，把目标的id赋值给 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
</script>

三、放到何处 - ondragover

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

<img draggable="true" ondragstrat="drag(event)">
<div id="div1"  ondragover="allowDrop(event)"></div>
<script>
    function drag(ev){
        // 设置拖放的数据，把目标的id赋值给 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
    //设置元素可被放置
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
</script>

四、进行放置 - ondrop

事件绑定在需要放置的元素上。

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

<img id="drag1" src="xxx" draggable="true" ondragstrat="drag(event)">
<div id="div1"  ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
    function drag(ev){
        // 设置拖放的数据，把目标的id赋值给 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
    //设置元素可被放置
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    //进行放置
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }

</script>

如果需要在两个元素中来回拖放，按照思路，给这两个元素设置为可放置即可。