Javascript 如何获取克隆图像所在的行和列？_Javascript_Jquery_Html_Css

Javascript 如何获取克隆图像所在的行和列？

javascript jquery html css

Javascript 如何获取克隆图像所在的行和列？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想知道如何显示克隆图像所在的行和列。例如，如果我想将图像拖到第1行第5列，在拖放图像时，是否可以将第1行第5列的值输入到内存数组中 <style> #div1 {position:absolute;width:100px;height:25px;top:150px;left:200px;padding:0px;border:1px solid #aaaaaa;border-color: white white white black;} #div2 {position:absol

我想知道如何显示克隆图像所在的行和列。例如，如果我想将图像拖到第1行第5列，在拖放图像时，是否可以将第1行第5列的值输入到内存数组中

<style>

#div1 {position:absolute;width:100px;height:25px;top:150px;left:200px;padding:0px;border:1px solid #aaaaaa;border-color: white white white black;}
#div2 {position:absolute;width:100px;height:25px;top:150px;left:300px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div3 {position:absolute;width:100px;height:25px;top:150px;left:400px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div4 {position:absolute;width:100px;height:25px;top:150px;left:500px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div5 {position:absolute;width:100px;height:25px;top:150px;left:600px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div6 {position:absolute;width:100px;height:25px;top:150px;left:700px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div7 {position:absolute;width:100px;height:25px;top:150px;left:800px;padding:0px;border:1px solid #aaaaaa;border-color: white black white white;

</style>

<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));}
</script>



<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)" ></div

</body>

<img id="drag1" src="bat.png" draggable="true" ondragstart="drag(event)"    width="100" height="25" align="center">
 <img id="drag2" src="ball.png" draggable="true" ondragstart="drag(event)" width="100" height="25" align="center">

另外，是否可以将图像放入第1行第5列，并将其设置为“打开”状态，该状态将输入到内存数组中

<style>

#div1 {position:absolute;width:100px;height:25px;top:150px;left:200px;padding:0px;border:1px solid #aaaaaa;border-color: white white white black;}
#div2 {position:absolute;width:100px;height:25px;top:150px;left:300px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div3 {position:absolute;width:100px;height:25px;top:150px;left:400px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div4 {position:absolute;width:100px;height:25px;top:150px;left:500px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div5 {position:absolute;width:100px;height:25px;top:150px;left:600px;padding:0px;border:1px solid #000000;border-color: white white white white;}
#div6 {position:absolute;width:100px;height:25px;top:150px;left:700px;padding:0px;border:1px solid #aaaaaa;border-color: white white white white;}
#div7 {position:absolute;width:100px;height:25px;top:150px;left:800px;padding:0px;border:1px solid #aaaaaa;border-color: white black white white;

</style>

<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));}
</script>



<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)" ></div

</body>

<img id="drag1" src="bat.png" draggable="true" ondragstart="drag(event)"    width="100" height="25" align="center">
 <img id="drag2" src="ball.png" draggable="true" ondragstart="drag(event)" width="100" height="25" align="center">


#div1{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：200px；填充：0px；边框：1px实心#aaaaaa；边框颜色：黑白；}
#div2{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：300px；填充：0px；边框：1px实心#aaaaaa；边框颜色：白色；}
#div3{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：400px；填充：0px；边框：1px实心#aaaaaa；边框颜色：白色；}
#div4{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：500px；填充：0px；边框：1px实心#000000；边框颜色：白色；}
#div5{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：600px；填充：0px；边框：1px实心#000000；边框颜色：白色；}
#div6{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：700px；填充：0px；边框：1px实心#aaaaaa；边框颜色：白色；}
#div7{位置：绝对；宽度：100px；高度：25px；顶部：150px；左侧：800px；填充：0px；边框：1px实心#aaaaaa；边框颜色：白色；
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（data.cloneNode（true））；}
我想我需要一点更具体的信息，但是，这应该会让你走上正确的方向：
基本上，在drop
函数中，您希望将目标值（在本例中是div1、div2等）div作为对象推送到数组中
var memoryArray = [];


function drop(ev) {
var _target = ev.target;
    var targetId = _target.getAttribute('id');
    var elem = document.getElementById(targetId)
    setTimeout(function(){
       var imgSrc = elem.getElementsByTagName('img')[0].src;      
       var object = {
                    id:elem.id ,
              image: imgSrc

       }
       memoryArray.push(object)
       console.log(memoryArray)

    }, 20)
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}

实现这一点的方法有很多，这只是其中之一
这是一个