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>
  • 相关阅读:
    day35作业
    进程的初识
    day34作业
    python中的文件
    python字典概述
    python中的深拷贝与浅拷贝
    python的元组和列表使用之一
    Python基本数据类型
    python的编码
    windows中安装python
  • 原文地址:https://www.cnblogs.com/angle-xiu/p/11204512.html
Copyright © 2011-2022 走看看