英文:
Get the text of a Span element contained inside a DIV element - which was drag-dropped into another Div
问题
以下是您要翻译的内容：
我有一个可拖动的DIV元素，里面有一个带有一些文本的span元素。
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
这个DIV没有任何ID或类名。我不允许在这个DIV中添加任何属性。
我将这个DIV拖到另一个DIV（放置区域）中。
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px;">
这是两个JavaScript函数。
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data); // 如何在这里获取SPAN文本？???
}
在控制台中我得到了空白。
是否有一种方法可以在第一个DIV被拖到第二个DIV之后在控制台中打印出span文本？
这是完整HTML页面的代码。
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data); // 如何在这里获取SPAN文本？???
}
</script>
</head>
<body>
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
<br/><br/>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">
</body>
</html>
请注意，我已经忽略了代码部分，只返回了翻译的内容。
英文:
I have a DIV element which is draggable, inside this DIV, I have a span element with some text.
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
This DIV does not have any ID, or Class Name. I am not allowed to add any attribute in this DIV.
I am dragging this DIV into another DIV (Drop zone).
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"
style="border: 2px solid blue; height:200px; width:400px">
These are the two JavaScript functions.
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data); // How can I get the SPAN text here ????
}
I am getting blank in the console.
Is there any way to get the span text printed in the console after the first DIV is dragged into the second div ?
Here is the code for the full HTML Page.
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
console.log(data); // How can I get the SPAN text here ????
}
</script>
</head>
<body>
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
<br/><br/>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"
style="border: 2px solid blue; height:200px; width:400px">
</body>
a</html>
答案1
得分: 1
你可以使用 draggable 属性获取文本：
工作示例：
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
var data = $('div[draggable=true]').find('span').text();
console.log(data);
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
<br/><br/>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">
对于多个可拖动的 div 元素，需要在 jQuery 代码中进行轻微的更改。
请参考此链接：https://jsfiddle.net/uoLj78xw/
英文:
You can use the draggable attribute to get the text:
Working snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
var data = $('div[draggable=true]').find('span').text();
console.log(data);
}
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
<br/><br/>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">
<!-- end snippet -->
For multiple draggable divs a slight change in jquery code is needed.
Check this: https://jsfiddle.net/uoLj78xw/
答案2
得分: 0
在body标签上添加ondragstart事件监听器。每当事件被触发时，e.target将返回实际可拖动的div。使用e.target.childNodes[1].innerHTML来获取该div的第一个子元素内部的文本。只需使用e.dataTransfer.setData('text', data);来设置数据，现在可以在drop事件监听器中读取数据。
document.body.addEventListener('dragstart', (e) => {
const data = e.target.childNodes[1].innerHTML;
e.dataTransfer.setData('text', data);
});
function drop(e) {
e.target.innerHTML = e.dataTransfer.getData('text');
}
function dragOver(e) {
e.preventDefault();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.d2 {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>
<title>Document</title>
</head>
<body>
<div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
<span>
hii
</span>
</div>
<div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
<span>
bye
</span>
</div>
<div class='d2' ondragover='dragOver(event)' ondrop='drop(event)'>
</div>
</body>
</html>
英文:
Add the ondragstart event listener on the body tag itself. Whenever the event is fired e.target will return the actual draggable div. Use e.target.childNodes[1].innerHTML to get the text inside the first child of that div. Just set the data using e.dataTransfer.setData('text', data); and now you can read the data on drop event listener.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
document.body.addEventListener('dragstart', (e) => {
const data = e.target.childNodes[1].innerHTML;
e.dataTransfer.setData('text', data);
});
function drop(e) {
e.target.innerHTML = e.dataTransfer.getData("text");
}
function dragOver(e) {
e.preventDefault();
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.d2 {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>
<title>Document</title>
</head>
<body>
<div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
<span>
hii
</span>
</div>
<div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
<span>
bye
</span>
</div>
<div class='d2' ondragover='dragOver(event)' ondrop='drop(event)'>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论