如何获取克隆映像所在的行和列

How to get the Row and Column that a cloned image is in?

本文关键字：映像 何获取 获取      更新时间：2023-09-26

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

还可以将图像放在第 1 行第 5 列中并将其设置为将输入到内存数组中的状态"on"？

<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">

我想我需要更具体的信息，但这应该会让你朝着正确的方向前进：

基本上在 drop 函数上，您希望将目标值（在本例中为 div1, div2 etc）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));
}

有很多方法可以实现这一点，这只是其中之一。

这是一个小提琴

相关文章：