zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Set和Multiset 怎么用咧↓↓↓
    sql server 复习笔记2
    sql server 复习笔记1
    数据分析相关学习 -1 numpy
    复习2
    scrapy 4 学习 crawl spider
    scrapy3 中间件的使用
    scapy2 爬取全站,以及使用post请求
    复习1
    scrapy 学习笔记2 数据持久化
  • 原文地址:https://www.cnblogs.com/FengBrother/p/11373361.html
Copyright © 2011-2022 走看看