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

"Clicking on the dropdown menu will consistently result in it collapsing

The issue with ajax in CodeIgniter is that it keeps displaying a false message, even though the value is present

Tips for validating a string in a URL with Selenium IDE

Understanding the error handling in Express.js

Customizing the placeholder font size in Material UI Autocomplete using ReactJS

How can you proactively rebuild or update a particular page before the scheduled ISR time interval in Next.js?

What is the best way to search for items using only a portion of a phone number or typing a name in any case (uppercase, lowercase) and still get accurate results?

Webpack has issues with loading HTML files

Converting a stringified array object to an object using Expressjs

When using jQuery's POST method, the "done" event is triggered, however, no data is being sent

When executing `npm run start`, a blank page appears exclusively on the server

The internal cjs loader in node threw an error at line 1078

Problem encountered when transferring JSON data to PHP for file writing

Attempting to transform a numerical value into CSS syntax

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

Retrieve particular JSON information on a single webpage by selecting an element on a separate page

Utilizing AJAX for sending data to a PHP database and automatically updating the page

Can we utilize object properties in this manner?

How can I enable the "edit" function for a button within a list item?

Create a PHP form that includes text and image inputs with the help of AdminLTE and integrates DropZone.js