~遗憾 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日

悬赏问题

  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥15 小红薯封设备能解决的来
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助
  • ¥15 STM32控制MAX7219问题求解答
  • ¥20 在本地部署CHATRWKV时遇到了AttributeError: 'str' object has no attribute 'requires_grad'
  • ¥15 vue+element项目中多tag时,切换Tab时iframe套第三方html页面需要实现不刷新
  • ¥50 深度强化学习解决能源调度问题
  • ¥15 一道计算机组成原理问题