zoukankan      html  css  js  c++  java
  • html5 drag

    这里是学习html5的拖放功能。这个API主流浏览器基本支持。ie浏览器是有限支持,dataTransfer.setData/getData。

    在html5里面,任何元素都是可以拖放的。

    • 需要拖放的元素要添加draggable="true"这个属性。然后设置拖动的时候触发的事件ondragstart="drag(event)"。函数里面设置传递的数据,将拖动元素的信息传递给e.dataTransfer。
    • 设置ondragover事件触发的函数。先要将存放元素的容器如div触发ondragover事件,确保容器可以放元素,使用event.preventDefault()方法。然后容器触发ondrop事件,接受e.dataTransfer传递过来的值。

    代码:


    <style type="text/css" rel="stylesheet">
    body {
    80%;
    margin:0 auto;
    }
    .drop {
    border:1px solid black;
    30%;
    height:200px;
    float: left;
    }
    img {
    20%;
    }
    </style>
    <script type="text/javascript">
    function allowdrop(e){
    e.preventDefault();
    }

    function drag(e){
    e.dataTransfer.setData('text',e.target.id);
    }

    function drop(e){
    e.preventDefault();
    var data = e.dataTransfer.getData('text');
    e.target.appendChild(document.getElementById(data));
    }
    function drop_del(e){
    e.preventDefault();
    var data = e.dataTransfer.getData('text');
    //e.target.appendChild(document.getElementById(data));
    document.getElementById(data).remove();
    }
    </script>
    </head>
    <body>
    <div>
    <h2>做蛋糕要用哪些材料呢,选出来扔进篮子里吧</h2>
    <img src="./ex_1.jpg" alt="pic" id=dragimg1 draggable="true" ondragstart="drag(event)">
    <img src="./tx.jpg" alt="pic" id=dragimg2 draggable="true" ondragstart="drag(event)">
    <img src="./tx.jpg" alt="pic" id=dragimg3 draggable="true" ondragstart="drag(event)">
    </div>

    <div class="drop" ondragover="allowdrop(event)" ondrop="drop(event)">

    </div>

    <div class="drop" ondragover="allowdrop(event)" ondrop="drop_del(event)"><p>多出来的扔掉吧~</p></div>

  • 相关阅读:
    MAVEN 配置阿里云源
    Windows10远程连接CentOS7(搭建Xrdp服务器)
    在jsp显示图片
    unbuntu自动任务定时重启
    eager模式与自定义训练
    JDK安装
    VMware克隆Linux虚拟机注意事项
    系统字符编码
    Iptables防火墙
    查看系统信息
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/6166001.html
Copyright © 2011-2022 走看看