Question 183525 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

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

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).

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

These are the two JavaScript functions.

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 ????
}

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.

<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>
Tags:

2

Answers


  1. 0

    You can use the draggable attribute to get the text:

    Working snippet:

    function allowDrop(ev) {
  ev.preventDefault();
}

counter = 0;

function drop(ev) {
  var data = $('div[draggable=true]:eq(' + counter + ')').find('span').text();
  counter++;
  if ($('div[draggable=true]').length == counter) {
    counter = 0;
  }
  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 draggable="true" style="border:5px solid blue; height:30px; width:150px;">
  <span>Value345</span>
</div>
<br/><br/>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 2px solid blue; height:200px; width:400px">
    Login or Signup to reply.
  2. 0

    Here is a simpler/scalable way of doing this without adding the ondragstart attribute on the draggable div.

    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>

    Check the below code snippet. You have to set the data when drag event is fired, drag_event.target has the source div. Use source_div.childNodes[1] to get the first child and extract the data to be used. After you set the data using datatransfer.setData("TYPE",Value) then you can use the data on the destination div using dataTransfer.getData()

    // added drag function for ondragstart event listener
function drag(e) {
  e.dataTransfer.setData("text", e.target.childNodes[1].textContent);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  console.log(data); //check console
}
    div {
  border: 5px solid blue;
  height: 30px;
  width: 150px;
}
    <!DOCTYPE html>
<html>

<head>
</head>

<body>

  <!-- added ondragstart event listener to setdata -->
  <div draggable="true" ondragstart="drag(event)" ">
        <span>Value123</span>
    </div>
    <br /><br />
    <div id="dropzone " ondrop="drop(event) " ondragover="allowDrop(event) "
        style="border: 2px solid blue; height:200px; width:400px ">
        <!-- You did not close this div as well -->
    </div>
    
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search