获取拖放到另一个Div中的DIV元素内部包含的Span元素的文本。

Question

获取拖放到另一个Div中的DIV元素内部包含的Span元素的文本。

4

我有一个可拖动的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); // 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>

- Bluemarble

1

请你创建一个最小可复现示例。 - Alive to die - Anant

1

请你能否创建一个最小可复现示例？ - undefined

请访问[帮助]，参观一下[导览]，了解如何[提问]。先做些研究。如果遇到困难，请发布一个包含输入和预期输出的[mcve]示例，使用[<>](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)代码编辑器。 - mplungjan

请访问[帮助]，参观一下，看看有什么可以[询问]。做一些研究。如果遇到困难，请发布一个[MCVE]，注明输入和预期输出，使用< >片段编辑器。 - undefined

2个回答

0

在标签本身上添加事件监听器。每当事件被触发时，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>

- Aniket Pandey

记住，如果你将一个对象传递给setData()或HTML元素，它将被转换为字符串。因此，在传递值给setData()之前，无论需要执行什么转换或数据提取，都要先完成它。你可以传递对象/多个值，只需使用JSON格式正确地结构化它，然后在拖放事件中将字符串解析为JSON对象。 - Aniket Pandey

此外，OP 提到他不允许在这个可拖动的 DIV 上添加任何属性，所以他也不能添加 ondragstart="drag(event)"。 - Alive to die - Anant

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alive to die - Anant · Accepted Answer

你可以使用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/