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

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    function allowDrop(ev){//ondragover 事件规定在何处放置被拖动的数据, 拖进div移动行为
    ev.preventDefault();//元素的默认事件阻止
    }
    function drag(ev)//拖动行为
    {
    ev.dataTransfer.setData("Text",ev.target.id);//setData是将指定格式的数据赋值给dataTransfer,ev.target指传入对象
    }
    function drop(ev)//数据放出行为
    {
    ev.preventDefault();//元素的默认事件阻止处理
    var data=ev.dataTransfer.getData("Text");//getData是从dataTransfer或者clipboardData中获取值
    ev.target.appendChild(document.getElementById(data));//appendChild是追加,data数据
    }


    </script>
    </head>

    <body>
    <div id="div1" ondragstart="drag(event)" draggable="true" style="200px; height:150px; background:red;"></div>
    <!--draggable="true"设置为可以拖动,ondragstart在拖动操作开端运行的脚本。-->
    <div id="div2" ondrop="drop(event);" ondragover="allowDrop(event);" style=" 100%; height:600px; border:1px solid #ffff00;"></div>
    </body>
    </html>

  • 相关阅读:
    Pagodas
    Bazinga
    取石子问题
    Sudoku Killer(hdu 1426 数独)
    欧拉函数
    CCPC Ancient Go
    ZZNU 1992: 情人节的尴尬
    fzu Problem 2128 最长子串(KMP + strstr 经典好题)
    POJ
    HDU
  • 原文地址:https://www.cnblogs.com/xurui01/p/3980352.html
Copyright © 2011-2022 走看看