在子对象之间移动时触发HTML/JAVASCRIPT ondragleave
在子对象之间移动时触发HTML/JAVASCRIPT ondragleave
提问于 2022-06-16 11:55:28
我对在子元素之间触发的javascript 'ondragleave‘的行为有问题。
请参阅示例中的一些简单代码。
问题是，虽然鼠标仍在TR记录中拖动，但两个TD元素之间的记录不会保持红色。
有一些答案包括计数器，但似乎它们都不可能工作。
function enter(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '#AA0000';
}
function leave(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '';
}<p draggable="true" id="dragtarget">Drag me!</p>
<table width=100% style='border-spacing: 30px;'>
<tr id='record1' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 1-1</td>
<td>Record 1-2</td>
<td>Record 1-3</td>
<td>Record 1-4</td>
</tr>
<tr id='record2' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 2-1</td>
<td>Record 3-2</td>
<td>Record 4-3</td>
<td>Record 5-4</td>
</tr>
</table>
回答 1
Stack Overflow用户
发布于 2022-06-16 12:21:02
假设这是你的问题：
问题是记录不会在两个TD元素之间保持红色。
这可以用CSS解决&与ondragleave无关。
function enter(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '#AA0000';
}
function leave(ev, recordid) {
document.getElementById(recordid).style.backgroundColor = '';
}<style>
td { padding: 0px; }
table { width: 100%; border-spacing: 0px; }
</style>
<p draggable="true" id="dragtarget">Drag me!</p>
<table>
<tr id='record1' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 1-1</td>
<td>Record 1-2</td>
<td>Record 1-3</td>
<td>Record 1-4</td>
</tr>
<tr id='record2' ondragenter='enter(event, this.id);' ondragleave='leave(event, this.id);'>
<td>Record 2-1</td>
<td>Record 3-2</td>
<td>Record 4-3</td>
<td>Record 5-4</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72645433
复制相关文章
相似问题
腾讯云开发者
