zoukankan      html  css  js  c++  java
  • 53.一个挺有意思的api(drag)

     HTML

    <div id="div2" ondrop="drop(event)" ondragover="allDrop(event)">
        <img id="drag1" src="img/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>
    <div id="div1" ondrop="drop(event)" ondragover='allDrop(event)'></div>
    <div draggable="true" ondragend="dragEnd(event)" id="div3"></div>

    CSS

    *{
         margin: 0;
         padding: 0;
    }
    #div1,#div2{
         width: 100px;
         height: 60px;
         border: 1px solid #333333;
         margin: 0 auto;
         margin-bottom: 20px;
    }
    img{
         width: 99%;
         height: 99%;
         margin-right: 10px;
    }
                
    #div3{
         height: 100px;
         width: 100px;
         position: fixed;
         top: 200px;
         left: 200px;
         background: #58a;
    }

    JS

    <script type="text/javascript">
                function allDrop(ev) {
                
                    ev.preventDefault();
                }
                
                function drag(ev) {
            
                    ev.dataTransfer.setData("text", ev.target.id);
                }
                function dragEnd(e){
                    let ele = document.getElementById(e.target.id)
                    ele.style.top = e.clientY-50+'px'
                    ele.style.left = e.clientX-50+'px'
                    
                }
                function drop(ev) {
                
                    ev.preventDefault();
                    var data = ev.dataTransfer.getData("text");
                    ev.target.appendChild(document.getElementById(data));
                }
    </script>
  • 相关阅读:
    单链队列
    栈的顺序存储表示
    顺序队列
    串的定长顺序存储表示
    串的堆分配存储
    双向循环链表
    单循环链表的表示和实现
    串的块链存储表示
    线性表的顺序表示和实现
    线性表的单链表表示和实现
  • 原文地址:https://www.cnblogs.com/famLiu/p/7510594.html
Copyright © 2011-2022 走看看