美文网首页
HTML拖拽

HTML拖拽

作者: 独步江雪 | 来源:发表于2020-02-12 14:24 被阅读0次
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    
    function drag(event) {
        event.dataTransfer.setData('text',event.target.innerText);
    }
    
    function drop(event) {
        event.preventDefault();
        var text = event.dataTransfer.getData('text');
        event.target.innerText = text;
    }
    </script>
    </head>
    <body>
    
    <div  ondrop="drop(event)" ondragover="allowDrop(event)" style="background:red;height:100px;width:100px"></div>
    
    <div  draggable="true" ondragstart="drag(event)" style="background:blue;height:100px;width:100px">拖拽源</div>
    
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML拖拽

          本文链接:https://www.haomeiwen.com/subject/wefcfhtx.html