zoukankan      html  css  js  c++  java
  • H5之拖拽

    步骤:

      1.为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存;

      2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的放置。

    <html>

    <head>
    <meta charset="utf-8">
    <style>
    .box1 {
    100px;
    height: 100px;
    border: 1px black solid;
    margin-bottom: 20px;
    background: lightblue;
    }

    .box2 {
    100px;
    height: 100px;
    border: 1px black solid;
    background: lightcoral;
    }
    </style>
    </head>

    <body>
    <!-- 参数要传入event对象 -->
    <div class="box1" ondragover="allowdrop(event)" ondrop="drop(event)">
    <img src="img/2.jpg" alt="00" draggable="true" ondragstart="drag(event)" id="drag" width="50" height="50">
    <span>我是盒子一</span>
    </div>
    <div class="box2" ondragover="allowdrop(event)" ondrop="drop(event)">
    <span>我是盒子二</span></div>
    <script>
    function allowdrop(e) {
    e.preventDefault();
    }

    function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));
    }

    function drag(e) {
    e.dataTransfer.setData("text", e.target.id);
    }
    </script>
    </body>

    </html>
  • 相关阅读:
    qt映射器QSignalMapper的理解
    win10环境下安装Qt4.8、PyQt及development tools
    BZOJ1040 基环森林 找环+基础树形DP
    贪心 BZOJ1034
    HDU5293 树链剖分+树形DP
    BZOJ 1028 BZOJ 1029 //贪心
    BZOJ1025
    仙人掌图判定及求直径HDU3594 BZOJ1023
    BZOJ1021
    BZOJ1022
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/11204512.html
Copyright © 2011-2022 走看看