如何获取拖入目标Div的无属性Draggable Div内Span的文本？

要获取拖拽元素内部span的文本，关键是在拖拽开始阶段把span的文本存入dataTransfer对象，这样在放置阶段就能读取到。因为你不能给可拖拽DIV添加属性，所以可以通过JavaScript选择器找到该元素并绑定dragstart事件。

修改后的完整代码如下：

<html>
<head>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }
      
      function drop(ev) {
          ev.preventDefault();                     
          var data = ev.dataTransfer.getData("text");
          console.log(data); // 现在会输出Value123
      }

      // 页面加载完成后绑定dragstart事件
      window.addEventListener('load', function() {
          // 通过属性选择器找到draggable为true的DIV
          const draggableDiv = document.querySelector('div[draggable="true"]');
          draggableDiv.addEventListener('dragstart', function(ev) {
              // 获取内部span的文本
              const spanText = this.querySelector('span').textContent;
              // 将文本存入dataTransfer
              ev.dataTransfer.setData('text', spanText);
          });
      });
    </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>

原理说明 #

• 原代码没有在拖拽开始时向dataTransfer写入数据，所以getData('text')返回空白。
• 通过document.querySelector('div[draggable="true"]')可精准定位目标DIV，无需给它添加额外ID或类。
• 在dragstart事件中，通过this.querySelector('span')获取内部span元素，提取其文本并存入dataTransfer，放置阶段就能读取到该文本。

内容的提问来源于stack exchange，提问作者Bluemarble