用e.dataTransfer的方法实现元素拖拽并存储

依然在坚持看着视频课，自己试着敲点代码，不知道要多久才能达到可工作状态，希望所有的选择都不是急功近利。

css部分：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        section {
            width:100%;
            height: 500px;
        }
        section .container {
            width: 1000px;
            height: 100%;
            margin: 0 auto;
        }
        .div1 {
            height: 200px;
            width: 200px;
            float: left;
            border: 1px solid blue;
            margin-left:20px;
        }

        .div2 {
            height: 200px;
            width: 200px;
            float: left;
            border: 1px solid yellow;
            margin-left:20px;
        }

        .div3 {
            height: 200px;
            width: 200px;
            float: left;
            border: 1px solid green;
            margin-left:20px;
        }
        p {
            background-color: orange;
            margin-top: 5px;
            height:50px;
            line-height:50px;
        }
    </style>

html部分：

<section>
        <div class="container">
            <div id="div1" class="div1">
                <p id="p2" class="p1" draggable="true">请把我带走</p>
                <p id="p3" class="p2" draggable="true">请把我也带走</p>
            </div>
            <div id="div2" class="div2"></div>
            <div id="div3" class="div3"></div>
        </div>
</section>

js部分：

<script>
        document.ondragstart=function (e) {
            //e.target就是被选中的拖拽元素
            //当拖拽时背景改为0.5
            //父盒子的边框宽度变为5px
            //通过e.dataTransfer方法来存储被拖拽元素的id，这样在ondrop的时候可以获取这个id，并未选中元素添加拖拽元素
            e.target.style.opacity=0.5;
            e.target.parentNode.style.borderWidth="5px";
            e.dataTransfer.setData("text/html",e.target.id);
        };

        document.ondragend=function (e) {
            //当拖拽完成时将元素的透明度，父盒子的边框宽度都更改回去
            e.target.style.opacity=1;
            e.target.parentNode.style.borderWidth="1px";
        };
        document.ondragover=function (e) {
            //浏览器默认不允许拖延元素，因此需要先阻止默认设置
            e.preventDefault();
        };
        document.ondrop=function (e) {
            //通过e.dataTransfer的方法在此获取之前存储的拖拽元素id，并添加到选中元素中
            var id=e.dataTransfer.getData("text/html");
            e.target.appendChild(document.querySelector("#"+id));
        }
</script>

最终效果：
拖拽前：

拖拽中：

拖拽后：