gpt4 book ai didi

javascript - HTML5 拖放问题

转载 作者:行者123 更新时间:2023-11-28 04:25:19 25 4
gpt4 key购买 nike

我对 javascript/web 编程有点陌生,我遇到了一些问题,这些问题可能应该有简单的解决方案,但我遇到了很多麻烦。我基本上只想将文本从一个表中的单元格拖到另一个表中的单元格。我的问题如下:

除了 (a href) 类型的链接拖放之外,我似乎什么也做不了。如果我尝试在 div 上设置 draggable=true 选项,它仍然不可拖动(在 firefox 中)。在我的搜索中,我还没有真正看到任何针对 firefox 的修复(但是我已经为 webkit 添加了 css 规则)。

为了解决这个问题,我试图拖动一个 (a href) - 为括号道歉,我可以使用的链接标签的数量是有限制的 - 从一个表的单元格到另一个表的文本输入字段的项目单元格,它的默认操作是只拖动链接。我希望它拖动的是标签的内容(例如,对于某些文本,我希望它返回“某些文本”或“可拖动”或任何其他可自定义的文本)。我已尝试通过 e.datatransfer.setData("Text", "My Custom Text") 和 e.datatransfer.getData("Text") 在 ondragstart/ondrop 事件中处理此问题,但我仍然收到相同的结果。有人对此有什么建议吗?我已经看了一段时间了,根本想不通。非常感谢您的帮助。

编辑:我无法访问我使用 atm 的计算机,但我会尝试了解我正在做的事情的基本要点..

onDrop(e){ //onDrop is assigned to the drophandler of a text input field
var text = e.dataTransfer.getData('Text');
this.Text = text;
e.preventDefault();
}
onDragOver(e){
e.preventDefault();
}
onDragStart(e){
e.dataTransfer.setData('Text', 'My String');
}
....
<table>
<tr>
<td><a id="ident" href="#" draggable="true">Text Content</a></td>
</tr>
<table>

<table>
<tr>
<td><input ondrop="onDrop(e)" type="text" /></td>
</tr>
<table>

最佳答案

这是我根据上面的框架完成的完整代码示例:

<html>
<head>
<title>drag and drop example</title>
<script type="text/javascript">
function onDrop(e){
e.preventDefault();
var text = e.dataTransfer.getData("text/plain");
var input = document.getElementById("destination");
input.value = text;
}

function onDragOver(e){
e.preventDefault();
}

function onDragStart(e){
e.dataTransfer.setData("text/plain", event.target.textContent);

}

</script>
</head>
<body>
<table>
<tr>
<td>
<span id="ident" draggable="true" ondragstart="onDragStart(event)">Text Content</span>
</td>
</tr>
<table>
<table>
<tr>
<td>
<input id="destination" ondragover="onDragOver(event)" ondrop="onDrop(event)" type="text" />
</td>
</tr>
<table>
</body>
</html>

注意几点:

关于javascript - HTML5 拖放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6024395/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com