zoukankan      html  css  js  c++  java
  • HTML5 拖拽简单总结

    //感觉拖拽挺有意思,刚开始玩,简单总结一下,有什么不对的地方欢迎指正,谢谢 后续继续更新
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .square{
    200px;
    height: 200px;
    background: #079cda;
    }
    #box,#box2{
    300px;
    height: 300px;
    border: 1px solid red;
    display: inline-block;
    }
    </style>
    </head>
    <body>
    <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <!--盒子1-->
    <div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div><!--盒子2-->
    <div id="figrue" draggable="true" ondragstart="drag(event)" class="square"></div> <!--图形-->
    </body>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault(); //阻止默认事件
    }
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id); //获得要拖的图形的id 并保持
    }
    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text"); //得到数据
    ev.target.appendChild(document.getElementById(data)); //把数据添加到节点
    }
    //总结: ondragstart 开始拖事件 ondrop 把拖的元素添加到节点 ondragover阻止默认事件
    </script>
    </html>
  • 相关阅读:
    js-js系列-数据类型-概念
    js-基础总结3
    js-基础总结2
    js-基础总结1
    js-面试题
    webpack-模块化
    js-对象常用方法
    js-事件冒泡-事件捕获-事件委托
    js-call aplly bind2
    aioxs实现token无感刷新
  • 原文地址:https://www.cnblogs.com/zou1234/p/8320185.html
Copyright © 2011-2022 走看看