Guide on how to retrieve the parent element's number when dragging starts

Question

Guide on how to retrieve the parent element's number when dragging starts

Within my div-containers, I have a collection of div-elements. I am looking to identify the parent number of the div-element that is currently being dragged

For example, if Skyler White is being dragged, the expected output should be "0" as it is from the first subcontainer with the id "subcontainer". If Jesse Pinkman is being dragged, the output should be 1

<div id="container">
<div id="subcontainer">
<div id="0" draggable="true">Walter White</div>
<div id="1" draggable="true">Skyler White</div>
<div id="2" draggable="true">Hank Schrader</div>
</div>
<div id="subcontainer"></div>
<div id="0" draggable="true">Saul Goodman</div>
<div id="1" draggable="true">Jesse Pinkman</div>
</div>
</div>

javascript

Answer 1

Answer №1

Utilize the .index() method provided by jQuery
Use .closest to target the closest element related to the current element
Implement the drag event to select the specific current element

It is important to keep in mind that there should not be multiple elements with the same id value within a single document.

$('div[draggable]').on('drag', function() {
  $('#output').text('Parent Index is: ' + $(this).closest('.subcontainer').index());
});

#output {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="subcontainer">
    <div id="0" draggable="true">Walter White</div>
    <div id="1" draggable="true">Skyler White</div>
    <div id="2" draggable="true">Hank Schrader</div>
  </div>
  <div class="subcontainer">
    <div id="0" draggable="true">Saul Goodman</div>
    <div id="1" draggable="true">Jesse Pinkman</div>
  </div>
</div>
<br/>
<br/>
<div id="output"></div>

JavaScript only approach:

Iterate through the NodeList returned by Document.querySelectorAll() using [].forEach.call
Attach an eventListener to each matched element utilizing addEventListener
Convert the NodeList using [].slice.call so we can use the indexOf method of Array
this.parentElement will retrieve the parent element of the current element

[].forEach.call(document.querySelectorAll('div[draggable]'), function(elem) {
  elem.addEventListener('drag', function() {
    var elemsArray = [].slice.call(document.querySelectorAll('.subcontainer'));
    var index = elemsArray.indexOf(this.parentElement);
    document.getElementById('output').textContent = 'Parent Index is: ' + index;
  });
});

* {
  padding: 0;
  margin: 0;
}
#output {
  font-weight: bold;
}

<div id="container">
  <div class="subcontainer">
    <div id="0" draggable="true">Walter White</div>
    <div id="1" draggable="true">Skyler White</div>
    <div id="2" draggable="true">Hank Schrader</div>
  </div>
  <div class="subcontainer">
    <div id="0" draggable="true">Saul Goodman</div>
    <div id="1" draggable="true">Jesse Pinkman</div>
  </div>
</div>
<br/>
<br/>
<div id="output"></div>

Answer 2

Utilize the .index() method provided by jQuery
Use .closest to target the closest element related to the current element
Implement the drag event to select the specific current element

It is important to keep in mind that there should not be multiple elements with the same id value within a single document.

$('div[draggable]').on('drag', function() {
  $('#output').text('Parent Index is: ' + $(this).closest('.subcontainer').index());
});

#output {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="subcontainer">
    <div id="0" draggable="true">Walter White</div>
    <div id="1" draggable="true">Skyler White</div>
    <div id="2" draggable="true">Hank Schrader</div>
  </div>
  <div class="subcontainer">
    <div id="0" draggable="true">Saul Goodman</div>
    <div id="1" draggable="true">Jesse Pinkman</div>
  </div>
</div>
<br/>
<br/>
<div id="output"></div>

JavaScript only approach:

Iterate through the NodeList returned by Document.querySelectorAll() using [].forEach.call
Attach an eventListener to each matched element utilizing addEventListener
Convert the NodeList using [].slice.call so we can use the indexOf method of Array
this.parentElement will retrieve the parent element of the current element

[].forEach.call(document.querySelectorAll('div[draggable]'), function(elem) {
  elem.addEventListener('drag', function() {
    var elemsArray = [].slice.call(document.querySelectorAll('.subcontainer'));
    var index = elemsArray.indexOf(this.parentElement);
    document.getElementById('output').textContent = 'Parent Index is: ' + index;
  });
});

* {
  padding: 0;
  margin: 0;
}
#output {
  font-weight: bold;
}

<div id="container">
  <div class="subcontainer">
    <div id="0" draggable="true">Walter White</div>
    <div id="1" draggable="true">Skyler White</div>
    <div id="2" draggable="true">Hank Schrader</div>
  </div>
  <div class="subcontainer">
    <div id="0" draggable="true">Saul Goodman</div>
    <div id="1" draggable="true">Jesse Pinkman</div>
  </div>
</div>
<br/>
<br/>
<div id="output"></div>

Guide on how to retrieve the parent element's number when dragging starts

Answer №1

Similar questions

It appears that the functionality of RegExp.prototype.exec() is not functioning as expected

The controller's AngularJS function seems to be unresponsive

Determine the data type of a property within a JavaScript object

Submit data via POST method on the modified URL

Understanding the significance of underscores in JavaScript strings

Exploring paths deep within by employing wildcards as a query

The information retrieved from an API fails to populate the table on the NextJS platform

Load suggestions from Material UI AutoComplete dynamically based on user input

Execute a series of Promises (or Deferreds) consecutively and have the flexibility to pause or stop at any point

Including v-menu in a button causes it to vanish in Vuetify

The Axios POST request successfully sends the data to the Express server but unfortunately encounters a 404 error

The AJAX response containing jQuery is failing to produce any visible changes

Exploring the World of Html

Implement lazy loading of content on scroll in Grails framework

Tips for choosing a specific cell in a table

Managing a database update when server actions involve various form types

The challenge of mapping React Select

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

Allow for the ability to choose a specific option for every individual line that is echoed in

retrieving a promise fails during the set interval