2. IT
    3. div叠加拖动 【drop】

    div叠加拖动 【drop】

    xiaoxiao2024-11-21  1
    <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         #div1,#div2{             float:left;             border: 1px solid gray;             width: 300px;             height: 380px;             padding-left: 50px;             padding-top: 30px;             background-color:rgba(121, 192, 194, 0.36);         }         .style{             border: 1px solid gray;             margin-top: 10px;             background-color: #c7ffc7;             width:120px;             text-align: center;         }     </style> </head> <body> <div οndrοp="drop3(this,event)" οndragοver="drag1(event)" id="div1" style="margin-top: 34px;">     <div class="style" id="d11" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div1中的span1</span><br><br>     </div>     <div class="style" id="d12" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div1中的span2</span><br><br>     </div>     <div class="style" id="d13" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div1中的span3</span><br><br>     </div>     <div class="style" id="d14" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div1中的span4</span><br><br>     </div> </div> <br><br> <div οndrοp="drop3(this,event)" οndragοver="drag1(event)" id="div2" style="margin-left: 100px;">     <div class="style" id="d21" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div2中的span1</span><br><br>     </div>     <div class="style" id="d22" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div2中的span2</span><br><br>     </div>     <div class="style" id="d23" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div2中的span3</span><br><br>     </div>     <div class="style" id="d24" οndragstart="drag2(event)" draggable="true" οndragοver="drag1(event)" οndrοp="drop3(this,event)">         <span>div2中的span4</span><br><br>     </div>

    </div>

    <script>     var imgid;     function drop3(obj,ev){         ev.stopPropagation();         obj.appendChild(document.getElementById(imgid));     }     function drag2(ev){         imgid=ev.target.id;         //记录被拖动元素的属性id     }     function drag1(ev){         ev.preventDefault();//阻止默认操作,让外部元素可以被拖进去     } </script> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-1293859.html
    最新回复(0)