JS实现图片拖拽

html:

<div class="d1">
        <img src="t018daab9697ad1ffb0.jpg" alt="" draggable="true">
    </div>
    <div class="d2"></div>

CSS里调整样式

.d1{
        width: 450px;
        height: 550px;
        border: solid 1px ;
        float: left;
    }
    .d2{
        width: 450px;
        height: 550px;
        border: solid 1px ;
        float: right;
    }

下面是js部分：

	//获取id
	var d1 = document.getElementsByClassName('d1')[0];
    var d2 = document.getElementsByClassName('d2')[0];
    var myimg = document.getElementsByTagName("img")[0];
    //开始拖拽
    myimg.ondragstart = function(e){
        //储存img路径
        var mysrc = myimg.src;
        //存到e对象中去
        e.dataTransfer.setData("a",mysrc)
    }
    d2.ondragenter = function(e){
        e.preventDefault()	//阻止默认行为
    }
    d2.ondragover = function(e){
        e.preventDefault()
    }
    d2.ondragleave = function(e){
        e.preventDefault()
    }
    d2.ondrop = function(e){
        e.preventDefault()
        var mysrc = e.dataTransfer.getData('a');
        //在拖拽目标下创建img标签
        var myimg1 = document.createElement("img");
        myimg1.src = mysrc;
        d2.appendChild(myimg1)
        e.dataTransfer.clearData('a')
        d1.removeChild(myimg)
    }