如何在dragstart上返回父元素号
如何在dragstart上返回父元素号
提问于 2016-08-09 11:00:37
我有许多包含多个div元素的div容器。我想获得正在被拖动的div-元素的父号。
斯凯勒·怀特被拖走了。它应该返回"0“，因为它是从具有相同id”子容器“的子容器的第一个子容器中拖出的。当杰西·平克曼被拖动时，它应该会返回一个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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-09 11:04:56
$('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 专用解决方案：
- 使用
[].forEach.call迭代Document.querySelectorAll()返回的NodeList - 使用
addEventListener在每个匹配的元素上附加event - 将
[].slice.call应用于NodeList，以便调用Array的indexOf方法 this.parentElement将返回当前元素的parent-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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38848942
复制相关文章
相似问题
腾讯云开发者
