zoukankan      html  css  js  c++  java
  • html5之拖放简单效果

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Drag and Drop</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
    #div1,#div2 {
    488px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
    }
    </style>
    <script type="text/javascript">
    //默认可放置
    function allowDrop(ev){
    ev.preventDefault();
    }
    //设置拖动
    function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    //设置放置
    function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>
    <!--
    /** 
     * drag(event) 被拖动的数据
     * drop(evemt) 放置数据
     * draggable = "true" 设置图片可拖动
     * 设置允许放置 调用ondragover的事件event.preventDefault();
     * event.dataTransfer.getData("Text") 从剪切板中获取指定格式的数据
     * event.dataTransfer.setData(""Text",evemt.target.id)给指定的对象赋予数据(数据类型:text,值是可拖动的元素id(drag1))
     */
    -->
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    </body>
    </html>
  • 相关阅读:
    centos下如何关闭xdebug扩展
    xdebug调试的原理
    取值再拼接跳转链接
    描点返回-动画
    比较旧的写法:验证车牌、手机号、电话、qq等
    jQuery实现ie浏览器兼容placeholder效果
    CSS3的REM设置字体大小
    整理前端问题
    css3 hover效果
    ie7 a标签强制不换行兼容问题
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3149673.html
Copyright © 2011-2022 走看看