获取包含在另一个DIV中被拖放的DIV元素内的Span元素的文本。

huangapple
go评论107阅读模式
英文:

Get the text of a Span element contained inside a DIV element - which was drag-dropped into another Div

问题

以下是您要翻译的内容：

我有一个可拖动的DIV元素，里面有一个带有一些文本的span元素。

  1. <div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
  2.     <span>Value123</span>
  3. </div>

这个DIV没有任何ID或类名。我不允许在这个DIV中添加任何属性。

我将这个DIV拖到另一个DIV（放置区域）中。

  1. <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px;">

这是两个JavaScript函数。

  1. function allowDrop(ev) {
  2.   ev.preventDefault();
  3. }
  5. function drop(ev) {
  6.     ev.preventDefault();                     
  7.     var data = ev.dataTransfer.getData("text");
  8.     console.log(data); // 如何在这里获取SPAN文本？???
  9. }

在控制台中我得到了空白。

是否有一种方法可以在第一个DIV被拖到第二个DIV之后在控制台中打印出span文本？

这是完整HTML页面的代码。

  1. <html>
  2. <head>
  3.     <script>
  4.       function allowDrop(ev) {
  5.         ev.preventDefault();
  6.       }
  7.       
  8.       function drop(ev) {
  9.           ev.preventDefault();                     
  10.           var data = ev.dataTransfer.getData("text");
  11.           console.log(data); // 如何在这里获取SPAN文本？???
  12.       }
  13.     </script>
  14. </head>
  15. <body>
  16.     <div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
  17.         <span>Value123</span>
  18.     </div>
  19.     <br/><br/>
  20.     <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">        
  21. </body>    
  22. </html>

请注意，我已经忽略了代码部分，只返回了翻译的内容。

英文:

I have a DIV element which is draggable, inside this DIV, I have a span element with some text.

  1. &lt;div draggable=&quot;true&quot; style=&quot;border:5px solid blue; height:30px; width:150px;&quot;&gt;
  2.     &lt;span&gt;Value123&lt;/span&gt;
  3. &lt;/div&gt;

This DIV does not have any ID, or Class Name. I am not allowed to add any attribute in this DIV.

I am dragging this DIV into another DIV (Drop zone).

  1. &lt;div id=&quot;dropzone&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot; 
  2. style=&quot;border: 2px solid blue; height:200px; width:400px&quot;&gt;

These are the two JavaScript functions.

  1. function allowDrop(ev) {
  2.   ev.preventDefault();
  3. }
  5. function drop(ev) {
  6.     ev.preventDefault();                     
  7.     var data = ev.dataTransfer.getData(&quot;text&quot;);
  8.     console.log(data); // How can I get the SPAN text here ????
  9. }

I am getting blank in the console.

Is there any way to get the span text printed in the console after the first DIV is dragged into the second div ?

Here is the code for the full HTML Page.

  1. &lt;html&gt;
  2. &lt;head&gt;
  3.     &lt;script&gt;
  4.       function allowDrop(ev) {
  5.         ev.preventDefault();
  6.       }
  7.       
  8.       function drop(ev) {
  9.           ev.preventDefault();                     
  10.           var data = ev.dataTransfer.getData(&quot;text&quot;);
  11.           console.log(data); // How can I get the SPAN text here ????
  12.       }
  13.     &lt;/script&gt;
  14. &lt;/head&gt;
  15. &lt;body&gt;
  16.     &lt;div draggable=&quot;true&quot; style=&quot;border:5px solid blue; height:30px; width:150px;&quot;&gt;
  17.         &lt;span&gt;Value123&lt;/span&gt;
  18.     &lt;/div&gt;
  19.     &lt;br/&gt;&lt;br/&gt;
  20.     &lt;div id=&quot;dropzone&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot; 
  21.     style=&quot;border: 2px solid blue; height:200px; width:400px&quot;&gt;        
  22. &lt;/body&gt;    
  23. a&lt;/html&gt;

答案1

得分: 1

你可以使用 draggable 属性获取文本：

工作示例：

  1. function allowDrop(ev) {
  2.   ev.preventDefault();
  3. }
  5. function drop(ev) {
  6.   var data = $('div[draggable=true]').find('span').text();
  7.   console.log(data);
  8. }
  1. <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  2. <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  4. <div draggable="true" style="border:5px solid blue; height:30px; width:150px;">
  5.   <span>Value123</span>
  6. </div>
  7. <br/><br/>
  8. <div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">

对于多个可拖动的 div 元素，需要在 jQuery 代码中进行轻微的更改。

请参考此链接：https://jsfiddle.net/uoLj78xw/

英文:

You can use the draggable attribute to get the text:

Working snippet:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function allowDrop(ev) {
  2.   ev.preventDefault();
  3. }
  7. function drop(ev) {
  8.   var data = $(&#39;div[draggable=true]&#39;).find(&#39;span&#39;).text();
  9.   console.log(data);
  10. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://code.jquery.com/ui/1.13.2/jquery-ui.js&quot;&gt;&lt;/script&gt;
  7. &lt;div draggable=&quot;true&quot; style=&quot;border:5px solid blue; height:30px; width:150px;&quot;&gt;
  8.   &lt;span&gt;Value123&lt;/span&gt;
  9. &lt;/div&gt;
  10. &lt;br/&gt;&lt;br/&gt;
  11. &lt;div id=&quot;dropzone&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot; style=&quot;border: 2px solid blue; height:200px; width:400px&quot;&gt;

<!-- end snippet -->

For multiple draggable divs a slight change in jquery code is needed.

Check this: https://jsfiddle.net/uoLj78xw/

答案2

得分: 0

在body标签上添加ondragstart事件监听器。每当事件被触发时，e.target将返回实际可拖动的div。使用e.target.childNodes[1].innerHTML来获取该div的第一个子元素内部的文本。只需使用e.dataTransfer.setData('text', data);来设置数据，现在可以在drop事件监听器中读取数据。

  1. document.body.addEventListener('dragstart', (e) => {
  2.   const data = e.target.childNodes[1].innerHTML;
  3.   e.dataTransfer.setData('text', data);
  4. });
  6. function drop(e) {
  7.   e.target.innerHTML = e.dataTransfer.getData('text');
  8. }
  10. function dragOver(e) {
  11.   e.preventDefault();
  12. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.     .d2 {
  9.       width: 200px;
  10.       height: 100px;
  11.       border: 1px solid green;
  12.     }
  13.   </style>
  14.   <title>Document</title>
  15. </head>
  17. <body>
  18.   <div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
  19.     <span>
  20.       hii
  21.     </span>
  22.   </div>
  23.   <div draggable="true" style='height: 50px;width: 50px;border: 1px solid red;'>
  24.     <span>
  25.       bye
  26.     </span>
  27.   </div>
  28.   <div class='d2' ondragover='dragOver(event)' ondrop='drop(event)'>
  30.   </div>
  32. </body>
  34. </html>
英文:

Add the ondragstart event listener on the body tag itself. Whenever the event is fired e.target will return the actual draggable div. Use e.target.childNodes[1].innerHTML to get the text inside the first child of that div. Just set the data using e.dataTransfer.setData(&#39;text&#39;, data); and now you can read the data on drop event listener.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. document.body.addEventListener(&#39;dragstart&#39;, (e) =&gt; {
  2.   const data = e.target.childNodes[1].innerHTML;
  3.   e.dataTransfer.setData(&#39;text&#39;, data);
  4. });
  6. function drop(e) {
  7.   e.target.innerHTML = e.dataTransfer.getData(&quot;text&quot;);
  8. }
  10. function dragOver(e) {
  11.   e.preventDefault();
  12. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.   &lt;style&gt;
  8.     .d2 {
  9.       width: 200px;
  10.       height: 100px;
  11.       border: 1px solid green;
  12.     }
  13.   &lt;/style&gt;
  14.   &lt;title&gt;Document&lt;/title&gt;
  15. &lt;/head&gt;
  17. &lt;body&gt;
  18.   &lt;div draggable=&quot;true&quot; style=&#39;height: 50px;width: 50px;border: 1px solid red;&#39;&gt;
  19.     &lt;span&gt;
  20.             hii
  21.         &lt;/span&gt;
  22.   &lt;/div&gt;
  23.   &lt;div draggable=&quot;true&quot; style=&#39;height: 50px;width: 50px;border: 1px solid red;&#39;&gt;
  24.     &lt;span&gt;
  25.             bye
  26.         &lt;/span&gt;
  27.   &lt;/div&gt;
  28.   &lt;div class=&#39;d2&#39; ondragover=&#39;dragOver(event)&#39; ondrop=&#39;drop(event)&#39;&gt;
  30.   &lt;/div&gt;
  32. &lt;/body&gt;
  34. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月12日 19:19:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76456143.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定