h5-拖拽接口

Posted fengbrother

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5-拖拽接口相关的知识,希望对你有一定的参考价值。

1.原效果网页

技术图片

拖拽后:

技术图片

2.主要实现代码

 1 <div class="div1" id="div1">
 2     <!--在h5中,如果想拖拽元素,久必须为元素添加draggable="true".图片和超链接默认就可以拖拽-->
 3     <p id="pe" draggable="true">试着把我拖拽过去1</p>
 4     <p id="pe1" draggable="true">试着把我拖拽过去2</p>
 5 </div>
 6 <div class="div2" id="div2"></div>
 7 <div class="div3" id="div3"></div>
 8 <script>
 9     /*学习拖拽,主要急救室学习拖拽事件*/
10     //var  ogj=null;//当前被拖拽的元素
11     /*var p = document.querySelector("#pe");
12     var div2 = document.querySelector("#div2");
13     var div1 = document.querySelector("#div1");*/
14     /*应用于被拖拽元素的事件*/
15     /*
16     * ondrag    应用于拖拽元素,整个拖拽过程都会调用--持续
17     * ondragstart    应用于拖拽元素,当拖拽开始是调用
18     * ondragleave   应用于拖拽元素,当鼠标离开拖拽元素是调用
19     * ondragend    应用于拖拽元素,当拖拽结束时调用
20     * */
21     document.ondragstart=function (e) 
22         /*通过事件捕获来获取前被拖拽的子元素*/
23         e.target.style.opacity=0.5;//拖拽元素半透明
24         e.target.parentNode.style.borderWidth="5px";
25         ogj=e.target;
26         //console.log("ondragstart");
27         /*通过dataTransfer来实现数据的存储于获取*/
28         /*
29         * setData(format,data);
30         * format:数据的类型:text/html  text/uri-list
31         * Data:数据:一般来说是字符串值
32         * */
33         e.dataTransfer.setData("text/html",e.target.id);
34     
35     document.ondragend=function (e) 
36         e.target.style.opacity=1;//拖拽元素还原透明度100%
37         e.target.parentNode.style.borderWidth="1px";
38         console.log("ondragend");
39     
40     document.ondragleave=function (e) 
41 
42     
43     document.ondrag=function (e) 
44 
45     
46     /*
47     * 应用于目标元素的事件
48     * ondragenter    应用于目标元素,当拖拽元素进入时调用
49     * ondragover    应用于目标元素,当停留在目标元素上时调用
50     * ondrop      应用于目标元素,当在目标元素上松开鼠标时调用
51     * ondragleave   应用于目标元素,当鼠标离开目标元素时调用
52     * */
53     document.ondragenter=function (e) 
54         console.log("-----"+e.target);
55     
56     document.ondragover=function (e) 
57         console.log("ondragover");
58         /*如果想触发ondrop事件,那么久必须在这个位置阻止浏览器的默认行为*/
59         e.preventDefault();
60     
61     /*浏览器默认会阻止ondrop事件:我们必须在ondragover中阻止浏览器的默认行为*/
62     document.ondrop=function (e) 
63         console.log("ondrop");
64         /*添加被拖拽的元素到当前目标元素*/
65         //e.appendChild(p);
66         /*通过e.dataTransfer.setSata存储的数据,只能在drop事件中获取*/
67         var id = e.dataTransfer.getData("text/html");
68         console.log(id);
69         e.target.appendChild(document.getElementById(id));
70     
71     document.ondragleave=function (e) 
72         console.log("目标元素:ondragleave");
73     
74 </script>

 

以上是关于h5-拖拽接口的主要内容,如果未能解决你的问题,请参考以下文章

H5的拖放事件(拖拽删除)

安卓端和h5后台接口有啥区别吗?

H5处理支付宝接口返回form

h5支付宝新老接口有啥不同

Java 后台接口实现同级拖拽排序代码示例

H5 拖拽操作