javascript - 如何让一张图片同时占据多个div-6ren

javascript - 如何让一张图片同时占据多个div

转载作者：行者123 更新时间：2023-11-30 10:25:37

我是 html 和 javascript 的新手，所以陷入了一些可能很简单的事情中，在此先感谢。我有一个尺寸为 140px x 140px 的图像，我有 4 个尺寸为 70px x 70px 的 div。div的排列如下

div1|div2
div3|div4

div 之间没有距离。我想将图像拖到 div 中，因为图像的面积等于所有 4 个 div，所以我希望图像同时占据所有 4 个 div。目前，该图像仅占据一个 div，只是遮挡其他部分(当放置在 div1 中时)，当放置在其他部分时会突出。

这是我的代码

            function allowDrop(ev)
            {
                ev.preventDefault();
            }

            function drag(ev)
            {
                ev.dataTransfer.setData("Text",ev.target.id);
                abc=ev.dataTransfer.getData("Text");
            }

        function drop(ev)
        {

                if(abc="image4x4")
                {
                      ev.preventDefault();
                  var data=ev.dataTransfer.getData("Text");
                                  ev.target.appendChild(document.getElementById(data));

            }
        }
    </script>
    <style>
        .divclass0
        {
            height:200px;
            width:200px;
            border:1px solid;

        }
        .divclass
        {
            height:200px;
            width:200px;
            border:1px solid;
            margin-left:201px;
            margin-top:-202px
        }
        .divclass1
        {
            height:70px;
            width:70px;
            border:1px solid;

        }
        .divclass2
        {
            height:70px;
            width:70px;
            border:1px solid;

        }
        .imageclass
        {
            height:140px;
            width:140px;
        }
        .divclass1b
        {
            height:70px;
            width:70px;
            border:1px solid;
            margin-left:71px;
            margin-top:-72px;
        }
        .divclass2b
        {
            height:70px;
            width:70px;
            border:1px solid;
            margin-left:71px;
            margin-top:-72px;
        }

    </style>
</head>
<body>
    <div class="divclass0" id="div0" ondrop="drop(event)"; ondragover="allowDrop(event)">
        <img id="image4x4" class="imageclass" src="tree2.jpg" draggable="true" ondragstart="drag(event)">
    </div>
    <div class="divclass" id="div0" ondrop="drop(event)"; ondragover="allowDrop(event)">
        <img id="image1x1" class="imageclass2" src="smiley3.png" draggable="true" ondragstart="drag(event)">
    </div>
    <div class="divclass1" id="div1" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>
    <div class="divclass1b" id="div1(b)" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>

    <div class="divclass2" id="div2" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>
    <div class="divclass2b" id="div2(b)" ondrop="drop(event)"; ondragover="allowDrop(event)">

    </div>