jquery 获取包含在DIV元素中的Span元素的文本-将其拖放到另一个Div中

kjthegm6  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(174)

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

eblbsuwk1#

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

smdnsysy

smdnsysy2#

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>

相关问题