h5-拖拽接口

1.原效果网页

拖拽后：

2.主要实现代码

 <div class="div1" id="div1">
     <!--在h5中，如果想拖拽元素，久必须为元素添加draggable="true".图片和超链接默认就可以拖拽-->
     <p id="pe" draggable="true">试着把我拖拽过去1</p>
     <p id="pe1" draggable="true">试着把我拖拽过去2</p>
 </div>
 <div class="div2" id="div2"></div>
 <div class="div3" id="div3"></div>
 <script>
     /*学习拖拽，主要急救室学习拖拽事件*/
     //var  ogj=null;//当前被拖拽的元素
     /*var p = document.querySelector("#pe");
     var div2 = document.querySelector("#div2");
     var div1 = document.querySelector("#div1");*/
     /*应用于被拖拽元素的事件*/
     /*
     * ondrag    应用于拖拽元素，整个拖拽过程都会调用--持续
     * ondragstart    应用于拖拽元素，当拖拽开始是调用
     * ondragleave   应用于拖拽元素，当鼠标离开拖拽元素是调用
     * ondragend    应用于拖拽元素，当拖拽结束时调用
     * */
     document.ondragstart=function (e) {
         /*通过事件捕获来获取前被拖拽的子元素*/
         e.target.style.opacity=0.5;//拖拽元素半透明
         e.target.parentNode.style.borderWidth="5px";
         ogj=e.target;
         //console.log("ondragstart");
         /*通过dataTransfer来实现数据的存储于获取*/
         /*
         * setData(format,data);
         * format:数据的类型：text/html  text/uri-list
         * Data:数据：一般来说是字符串值
         * */
         e.dataTransfer.setData("text/html",e.target.id);
     }
     document.ondragend=function (e) {
         e.target.style.opacity=1;//拖拽元素还原透明度100%
         e.target.parentNode.style.borderWidth="1px";
         console.log("ondragend");
     }
     document.ondragleave=function (e) {

     }
     document.ondrag=function (e) {

     }
     /*
     * 应用于目标元素的事件
     * ondragenter    应用于目标元素，当拖拽元素进入时调用
     * ondragover    应用于目标元素，当停留在目标元素上时调用
     * ondrop      应用于目标元素，当在目标元素上松开鼠标时调用
     * ondragleave   应用于目标元素，当鼠标离开目标元素时调用
     * */
     document.ondragenter=function (e) {
         console.log("-----"+e.target);
     }
     document.ondragover=function (e) {
         console.log("ondragover");
         /*如果想触发ondrop事件，那么久必须在这个位置阻止浏览器的默认行为*/
         e.preventDefault();
     }
     /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
     document.ondrop=function (e) {
         console.log("ondrop");
         /*添加被拖拽的元素到当前目标元素*/
         //e.appendChild(p);
         /*通过e.dataTransfer.setSata存储的数据，只能在drop事件中获取*/
         var id = e.dataTransfer.getData("text/html");
         console.log(id);
         e.target.appendChild(document.getElementById(id));
     }
     document.ondragleave=function (e) {
         console.log("目标元素：ondragleave");
     }
 </script>