~遗憾 2022-10-15 14:25 采纳率: 80%
浏览 9
已结题

关于#拖拽#的问题,如何解决?

我想要把拖拽的图片放到div中,然后图片消失,但是不知道怎么弄。
然后就是拖放功能在使用浏览器的开发者工具查看是就失效了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            #div1{
                width: 6.25rem;
                height: 6.25rem;
                border: 3px solid red;
                position: absolute;
                left: 25rem;
                top: 18.75rem;
            }
            img{
                width: 6.25rem;
                height: 6.25rem;
            }
        </style>
    </head>
    <body>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        </div>
        <img src="quote.png" id="myimg" draggable="true" ondragstart="dg(event);"/>
    </body>
    <script type="text/javascript">
        function dg(e){
            //将拖动的元素的id传递到后面的事件函数
            e.dataTransfer.setData("eid",e.target.id);
        }
        function allowDrop(e){
            //获取被拖动的元素的id
            //var id=e.dataTransfer.getData("eid")
            //阻止默认行为
            e.preventDefault();
        }
        function drop(e){
            //阻止默认行为
            e.preventDefault();
            //获取被拖动的元素的id
            var data=e.dataTransfer.getData("eid");
            //进行dom操作
            //e.target指的是div
            //appendChild添加元素
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</html>



  • 写回答

1条回答 默认 最新

  • 浪客 2022-10-15 14:54
    关注
    
    <script type="text/javascript">
        var vimg;
        function dg(e) {
            //将拖动的元素的id传递到后面的事件函数
            vimg = e.target.id;
            e.dataTransfer.setData("eid", e.target.id);
        }
        function allowDrop(e) {
            //获取被拖动的元素的id
            //var id = e.dataTransfer.getData("eid");
            //阻止默认行为
            e.preventDefault();
        }
        function drop(e) {
            var t = document.getElementById(vimg);
            t.parentNode.removeChild(t);
            //阻止默认行为
            e.preventDefault();
            //获取被拖动的元素的id
            //var data = e.dataTransfer.getData("eid");
            //进行dom操作
            //e.target指的是div
            //appendChild添加元素
            //e.target.appendChild(document.getElementById(data));
        }
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月23日
  • 已采纳回答 10月15日
  • 创建了问题 10月15日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度