qq_45735316
qq_45735316
采纳率80.7%
2020-05-25 17:09

HTML通过拖拽实现删除照片的功能要怎样实现?deleteObj()函数应该怎么写?

图片说明图片说明
//experiment13.js

var myimg;
function startDrag(that)
{
    myimg=that;
    console.log(myimg);
}
function prevent()
{
    e=window.event;
    e.preventDefault();
}
function getObj(that)
{
    var Objimg=myimg.cloneNode();
    that.appendChild(Objimg);
}
function deleteObj(that)
{
    deleteObj(myimg);
    //???
}

//index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5拖拽</title>
        <script src="js/experiment13.js"></script>
        <style>
            *{
                padding:0px;
                margin:0px;
            }
            #food{
                width:80%;
                height:300px;
                border:2px solid #ccc;
                float:left;
            }
            #delete{
                border:2px solid #ccc;
                height:100px;
                float:right;
                margin-right: 10px;
            }
            /*承载区*/
            #customerA{
                float:left;
                width:30%;
                height:220px;
                border:2px solid #c0c0c0;
            }
            #customerB{
                float:left;
                width:30%;
                height:220px;
                border:2px solid #c0c0c0;
                margin-left: 35px;
            }
            #customerC{
                float:right;
                width:30%;
                height:220px;
                border:2px solid #c0c0c0;
            }
        </style>
    </head>
    <body>
        <center>
            <div id="topic" style="height: 15px;line-height: 15px;border: 2px solid #c0c0c0;">
                <span>请将选择的菜品和果品拖拽到对应顾客下方区域</span>
            </div>
            <div id="name" style="border: 2px solid #ccc;height:15px;line-height: 15px;">
                <span style="width:30%;height:15px;float:left">顾客A</span>
                <span style="width:30%;height:15px;">顾客B</span>
                <span style="width:30%;height:15px;float: right;">顾客C</span>
            </div>
            <div id="customer" style="border:2px solid #ccc;height:222px;line-height: 220px;">
                <!--承载区-->
                <div id="customerA" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)"></div>
                <div id="customerB" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)"></div>
                <div id="customerC" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)"></div>
            </div>
        </br>
            <div id="foodname" style="border: 2px solid #ccc;height:20px;line-height: 18px;">
                <span style="width:80%;float:left;border: 2px solid #c0c0c0;">可选择的菜品及果品</span>
                <span style="float:right;margin-right: 45px;">删除</span>
            </div>
            <div id="food" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)">
                <img src="img/1.JPG" draggable="true" ondragstart="startDrag(this)">
                <img src="img/2.JPG" draggable="true" ondragstart="startDrag(this)">
                <img src="img/10.JPG"draggable="true" ondragstart="startDrag(this)">
                <img src="img/11.JPG"draggable="true" ondragstart="startDrag(this)"> 
                <img src="img/3.JPG" draggable="true" ondragstart="startDrag(this)">
                <img src="img/4.JPG" draggable="true" ondragstart="startDrag(this)">
                <img src="img/5.JPG" draggable="true" ondragstart="startDrag(this)">
                <img src="img/6.JPG" draggable="true" ondragstart="startDrag(this)"> 
                <img src="img/7.JPG" draggable="true" ondragstart="startDrag(this)"> 
                <img src="img/8.JPG" draggable="true" ondragstart="startDrag(this)"> 
                <img src="img/9.JPG" draggable="true" ondragstart="startDrag(this)"> 
            </div>
            <!--承载区-->
            <div id="delete" ondragenter="prevent()"
             ondragover="prevent()" ondrop="deleteObj(this)">
                <img src="img/12.JPG" draggable="false">
            </div>
        </center>
    </body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_41191401 一只成序源 11月前

    思路不就是 去掉之前的图片,把左边的element 也就是 标签去掉就好了。去掉哪一个那取决于拖入的是哪一个图片。最好给每一个图片一个ID,好区分。

    点赞 评论 复制链接分享
  • hhhhh____123 hhhhh____123 10月前

    可以使用removechild()
    先找到myimg的父节点,也就是myimg所在的div,再将myimg删除

    代码:
    function deleteobj(){
    myimg.parentNode.removechild(myimg);
    }

    初学者,找了好久的方法,不对请大佬指正

    点赞 评论 复制链接分享