在拖放操作中获取无ID/Class的Span元素文本-js教程-PHP中文网

在拖放操作中获取无id/class的span元素文本

本教程详细介绍了如何在JavaScript拖放操作中，从一个没有ID或Class属性的`

`元素内部的``标签中获取文本内容。文章将阐述为何传统的`dataTransfer.getData()`方法在此场景下可能无效，并提供使用jQuery选择器`$('div[draggable=true]').find('span').text()`的解决方案，同时探讨了处理多个可拖动元素时的进阶策略。

理解拖放事件与数据传输

在Web开发中，拖放（Drag and Drop）功能允许用户通过鼠标操作将页面元素从一个位置拖动到另一个位置。实现这一功能主要依赖于一系列DOM事件，如dragstart、dragover、drop等。其中，dataTransfer对象在这些事件中扮演着关键角色，用于在拖动过程中传输数据。

传统的数据传输机制

通常，我们会在dragstart事件中通过event.dataTransfer.setData(format, data)方法设置要传输的数据。例如：

function drag(ev) {
  ev.dataTransfer.setData("text/plain", ev.target.id); // 传输元素的ID
}

然后在drop事件中，通过event.dataTransfer.getData(format)方法获取这些数据：

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text/plain");
  // 使用data进行后续操作
}

然而，在某些特定场景下，例如当可拖动元素不允许添加额外的ID或Class属性，并且在dragstart事件中未显式设置任何数据时，event.dataTransfer.getData("text")在drop事件中可能会返回空字符串，导致无法获取到期望的内部文本。

解决特定场景下的文本获取问题

考虑以下HTML结构：一个可拖动的

，其中包含一个元素，但

本身没有ID或Class。


    Value123

目标是在drop事件触发后，获取到Value123中的“Value123”文本。

初始问题分析

如果dragstart事件没有被捕获或没有设置dataTransfer数据，直接在drop事件中使用ev.dataTransfer.getData("text")将无法获取到任何数据。这是因为getData()只能检索那些在dragstart期间通过setData()明确添加的数据。

解决方案：利用元素属性进行选择

在这种“不允许添加任何属性”的严格限制下，我们不能为可拖动

Play.ht

根据文本生成多种逼真的语音

下载

添加ID或Class，也不能修改其内部结构。但我们可以利用其已有的draggable="true"属性作为选择器。

通过jQuery，我们可以轻松地找到所有具有draggable="true"属性的

元素，然后在其内部查找标签并提取其文本内容。




    获取拖放Span文本教程
    
    
    


    拖放获取Span文本示例

    
        拖动我获取文本
    
    


    
        放置区域

在上述代码中，关键在于drop函数内的这一行：

var spanText = $('div[draggable=true]').find('span').text();

$('div[draggable=true]')：这个jQuery选择器会选取页面上所有带有draggable="true"属性的
元素。
.find('span')：在这些被选中的
元素内部，进一步查找所有的子元素。
.text()：获取这些元素的文本内容。如果匹配到多个，它会将其文本拼接起来。如果只有一个，则直接返回其文本。

注意事项： 这种方法在页面上只有一个可拖动div[draggable=true]时非常有效。如果页面上存在多个这样的div，$('div[draggable=true]').find('span').text()会返回所有匹配span元素的文本拼接结果，这可能不是我们期望的。

处理多个可拖动元素

当页面存在多个可拖动元素，且每个元素内部都有一个需要获取文本的时，上述的全局选择器就不再适用。在这种情况下，我们需要一种方法来识别是哪个特定的元素被拖动。

最健壮的解决方案是在dragstart事件中，将拖动元素的特定信息（例如其内部的文本）存储到dataTransfer对象中。




    多元素拖放获取Span文本教程
    


    多元素拖放获取Span文本示例

    
        条目A
    
    
        条目B
    
    
        条目C
    

    


    
        放置区域 (请将上方任意一个条目拖到此处)

在这个进阶方案中：

ondragstart="drag(event)"：每个可拖动的
都绑定了drag函数。
drag(ev)函数：
- ev.target指向当前被拖动的
  元素。
- ev.target.querySelector('span').textContent准确地获取了当前被拖动
  内部的文本。
- ev.dataTransfer.setData("text/plain", spanText)将这个唯一的文本数据存储起来。
- drop(ev)函数：
  - ev.dataTransfer.getData("text/plain")直接获取到在dragstart时设置的、与被拖动元素相关的特定文本。