我有一个可拖动的DIV元素,在这个DIV中,我有一个带有一些文本的span元素。
<div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
<span>Value123</span>
</div>
此DIV没有任何ID或类名。不允许在该DIV中添加任何属性。
我正在将此DIV拖到另一个DIV(Drop zone)。
<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); // How can I get the SPAN text here ????
}
我在控制台里一片空白。
在第一个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); // 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>
2条答案
按热度按时间eblbsuwk1#
您可以使用
draggable
属性来获取文本:工作片段:
对于多个可拖动的div需要在jquery代码中进行轻微更改。
点击这里:https://jsfiddle.net/uoLj78xw/
smdnsysy2#
在body标签本身添加ondragstart事件监听器。每当触发事件时,
e.target
将返回实际的可拖动div。使用e.target.childNodes[1].innerHTML
获取该div的第一个子元素中的文本。只需使用e.dataTransfer.setData('text', data);
设置数据,现在您可以在drop事件侦听器上读取数据。