Javascript 在表格中拖动图像-固定大小和每个图像
我希望能够拖动每一张图像，并将它们放在任何我喜欢的地方。我不能。我尝试过这么做，但失败了很多次。此外，我不知道为什么我的表不稳定。standar正在增加他的大小（宽度和高度）。我想要一个standar表，当我拖动图像时，它会发生变化。我也无法移动插入的所有图像。下面是javascript代码Javascript 在表格中拖动图像-固定大小和每个图像,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我希望能够拖动每一张图像，并将它们放在任何我喜欢的地方。我不能。我尝试过这么做，但失败了很多次。此外，我不知道为什么我的表不稳定。standar正在增加他的大小（宽度和高度）。我想要一个standar表，当我拖动图像时，它会发生变化。我也无法移动插入的所有图像。下面是javascript代码 $(function() { initDragAndDrop(); $('#addRow').on('click', function() { $('#targetTable
$(function() {
initDragAndDrop();
$('#addRow').on('click', function() {
$('#targetTable > tbody:last-child').append('<tr><td></td><td></td><td></td></tr>');
clearDragAndDrop();
initDragAndDrop();
});
});
function clearDragAndDrop() {
$('.event').off();
$('table td').off('dragenter dragover drop');
}
function initDragAndDrop() {
$('.event').on('dragstart', function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on('dragenter dragover drop', function(event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
de = $('#' + data).detach();
de.appendTo($(this));
}
});
}
<table id="targetTable" class="b" border="10" bordercolor="blue" style="width: 100%" height="10%" id="myT" >
<tbody><tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td> 9</td>
<td> 10</td>
<td> 11</td>
<td style="width: 5px; height: 1px;">12
<br>
<span class="event" id="a" draggable="true"> a <img src="./images/P2R.png" class="b" alt="Norway" style="width:30%" ></span>
<br>
<span class="event" id="a" draggable="true"> b <img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> c<img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> d<img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> e<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> f<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> g<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> h<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> i<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> k<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> l<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> m<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> n<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> o<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> p<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
</td>
</tr>
<td> 24
<br>
<span class="event" id="a" draggable="true"> a <img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> b <img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> c<img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> d<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> e<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> f<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> g<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> h<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> i<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> k<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> l<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> m<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> n<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> o<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
<br>
<span class="event" id="a" draggable="true"> p<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
</td>
<td> 23</td>
<td> 22</td>
<td> 21</td>
<td> 20</td>
<td> 19</td>
<td> 18</td>
<td> 17</td>
<td> 16</td>
<td> 15</td>
<td> 14</td>
<td> 13
</td>
</tr>
</tbody>
</div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
A.
B
C
D
E
F
G
H
我
K
L
M
N
o
P
24
a您为所有span
标记指定了相同的id
，因此您的代码无法正确找到删除图像的位置。相反，您可以使用数据属性
并为这些图像所在的td指定一些唯一的类。然后，只要使用这个类
和数据id
就可以在删除任何元素时分离它
演示代码：
$（函数（）{
initDragAndDrop（）；
$（'#addRow'）。在（'单击'，函数（）上）{
$（'#targetTable>tbody:last child'）。追加（''；
clearDragAndDrop（）；
initDragAndDrop（）；
});
});
函数clearDragAndDrop（）{
$（'.event'）.off（）；
美元（'table td'）。关（'dragenter dragover drop'）；
}
函数initDragAndDrop（）{
$（'.event'）。在（'dragstart'，函数（事件）上{
var dt=event.originalEvent.dataTransfer；
//从要删除的位置添加dat attr和类
dt.setData（'Text'，$（this）.data（'id'）+，“+$（this）.closest（'td'）.attr（'class'））；
});
$（'table td'）。打开（'dragenter dragover drop'，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'）.split（“，”）；
var data_id=数据[0]；
从类别到移除的变量=数据[1]
//找到要删除的td和span
de=$（“+from_class_to_remove+”>span[data id=“+data_id+”]）。detach（）；
de.appendTo（$（本））；
}
});
}
td-span{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#09C；
字体大小：粗体；
}
img{
填充：10px
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
A.
B
C
D
E
F
G
H
我
24
A.
B
c
d
e
F
23
22
21
20
19
18
17
16
15
14
13
您为所有span
标记指定了相同的id
，因此您的代码无法正确找到删除图像的位置。相反，您可以使用数据属性
并为这些图像所在的td指定一些唯一的类。然后，只要使用这个类
和数据id
就可以在删除任何元素时分离它
演示代码：
$（函数（）{
initDragAndDrop（）；
$（'#addRow'）。在（'单击'，函数（）上）{
$（'#targetTable>tbody:last child'）。追加（''；
clearDragAndDrop（）；
initDragAndDrop（）；
});
});
函数clearDragAndDrop（）{
$（'.event'）.off（）；
美元（'table td'）。关（'dragenter dragover drop'）；
}
函数initDragAndDrop（）{
$（'.event'）。在（'dragstart'，函数（事件）上{
var dt=event.originalEvent.dataTransfer；
//从要删除的位置添加dat attr和类
dt.setData（'Text'，$（this）.data（'id'）+，“+$（this）.closest（'td'）.attr（'class'））；
});
$（'table td'）。打开（'dragenter dragover drop'，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'）.split（“，”）；
var data_id=数据[0]；
从类别到移除的变量=数据[1]
//找到要删除的td和span
de=$（“+from_class_to_remove+”>span[data id=“+data_id+”]）。detach（）；
de.appendTo（$（本））；
}
});
}
td-span{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：#09C；
字体大小：粗体；
}
img{
填充：10px
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
<table id="targetTable" class="b" border="10" bordercolor="blue" style="width: 100%" height="10%" id="myT" >
<tbody><tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td> 9</td>
<td> 10</td>
<td> 11</td>
<td style="width: 5px; height: 1px;">12
<br>
<span class="event" id="a" draggable="true"> a <img src="./images/P2R.png" class="b" alt="Norway" style="width:30%" ></span>
<br>
<span class="event" id="a" draggable="true"> b <img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> c<img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> d<img src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> e<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> f<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> g<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> h<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> i<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> k<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> l<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> m<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> n<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> o<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
<br>
<span class="event" id="a" draggable="true"> p<img class="dragme" src="./images/P2R.png" class="b" alt="Norway" style="width:30%"></span>
</td>
</tr>
<td> 24
<br>
<span class="event" id="a" draggable="true"> a <img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> b <img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> c<img id="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> d<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> e<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> f<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> g<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> h<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> i<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> k<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> l<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> m<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> n<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%"></span
<br>
<span class="event" id="a" draggable="true"> o<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
<br>
<span class="event" id="a" draggable="true"> p<img class="dragme" src="./images/P1B.png" class="b" alt="Norway" style="width:30%">
</td>
<td> 23</td>
<td> 22</td>
<td> 21</td>
<td> 20</td>
<td> 19</td>
<td> 18</td>
<td> 17</td>
<td> 16</td>
<td> 15</td>
<td> 14</td>
<td> 13
</td>
</tr>
</tbody>
</div>
</div>