zoukankan      html  css  js  c++  java
  • HTML拖放

    <html>
    <head>
    <style>
    .droptarget {
        float: left;
        100px;
        height: 35px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    </style>
    </head>
    <body>
    <p>在两个矩形框中来回拖动 p 元素:</p>
    <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
    <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
    </div>
    <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <p style="clear:both;"><strong>注意:</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
    <p id="demo"></p>
    <script>
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
        document.getElementById("demo").innerHTML = "开始拖动 p 元素";
    }

    function allowDrop(event) {
        event.preventDefault();
    }

    function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
        document.getElementById("demo").innerHTML = " p 元素已被拖动";
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    收集的java面试题
    重载和重写的区别
    java中封装的概念
    java中多态的概念
    vue中的$on,$emit,$once,$off源码实现
    js bind的实现
    对象的深拷贝
    v-for的简单实现
    v-for的显示过滤/排序结果
    ES6的数组方法之Array.from
  • 原文地址:https://www.cnblogs.com/mywangpingan/p/7988776.html
Copyright © 2011-2022 走看看