1

私はhtmlとjavascriptが初めてなので、単純かもしれない何かに行き詰まってしまいました。よろしくお願いします。たとえば、140px x 140px のサイズの画像があり、それぞれ 70px x 70px のサイズの 4 つの div があります。Div は次のように配置されます

div1|div2
div3|div4

div 間に距離はありません。画像を div にドラッグしたいのですが、画像には 4 つの div すべてに等しい領域があるため、画像が 4 つの div すべてを同時に占有するようにします。現在、画像は 1 つの 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>

実際、div は私のゲームのプレーヤーのインベントリ ユニットであるはずです。commandos2(勇気ある男たち)というゲームのようにプレイヤーの所持品数を制限したい

4

3 に答える 3