拖放排序不适用于动态元素

Question

Currently it is possible for my users to input a string, that string gets split into words and the user can reorder those words. 目前，我的用户可以输入一个字符串，该字符串被拆分为单词，用户可以对这些单词重新排序。

the reordering works correctly when the elements are not dynamic, but the elements I am adding into the DOM are not able to be dragged and dropped. 当元素不是动态的，但是我要添加到DOM中的元素不能被拖放时，重新排序可以正常工作。

I have double checked and all the same attributes are being applied to the dynamically created elements as the ones applied to the elements already present in the list. 我已经仔细检查过，所有相同的属性都将应用于动态创建的元素，就像应用于列表中已经存在的元素一样。

Here is my code: 这是我的代码：

 function generateWords() { var inputedString = document.getElementById("stringInput").value; var splitStringArray = inputedString.split(" "); for (var i = 0; i < splitStringArray.length; i++) { var listItem = document.createElement("li"); var textNode = document.createTextNode(splitStringArray[i]); document.getElementById("columns").appendChild(listItem); var attrClass = document.createAttribute("class"); attrClass.value = "column"; listItem.setAttributeNode(attrClass); document.getElementById("columns").appendChild(listItem); var headerItem = document.createElement("header"); var columns = document.getElementsByClassName("column"); for (var j = 0; j < columns.length; j++) { headerItem.appendChild(textNode); columns[j].appendChild(headerItem); } } } function enableDragSort(listClass) { const sortableLists = document.getElementsByClassName(listClass); Array.prototype.map.call(sortableLists, (list) => { enableDragList(list) }); } function enableDragList(list) { Array.prototype.map.call(list.children, (item) => { enableDragItem(item) }); } function enableDragItem(item) { item.setAttribute('draggable', true) item.ondrag = handleDrag; item.ondragend = handleDrop; } function handleDrag(item) { const selectedItem = item.target, list = selectedItem.parentNode, x = event.clientX, y = event.clientY; selectedItem.classList.add('drag-sort-active'); let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y); if (list === swapItem.parentNode) { swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling; list.insertBefore(selectedItem, swapItem); } } function handleDrop(item) { item.target.classList.remove('drag-sort-active'); } (() => { enableDragSort('drag-sort-enable') })();

 #columns { list-style-type: none; margin: 20px; display: -webkit-inline-box; } .column { width: 162px; padding-bottom: 5px; padding-top: 5px; padding-right: 5px; text-align: center; cursor: move; } .column header { height: 20px; width: 150px; color: black; background-color: #ccc; padding: 5px; border-bottom: 1px solid #ddd; border-radius: 10px; border: 2px solid #666666; } .column:hover { background: red; }

 <!DOCTYPE html> <html> <body> <ul id="columns" class="drag-sort-enable"> <li class="column"> <header>Not dynamic</header> </li> <li class="column"> <header>Also NOT dynamic</header> </li> </ul> <form> Enter String to generate words:<input type="text" id="stringInput" name="stringInput" /><br/> </form> <button onclick="generateWords()">Generate Words</button> </body> </html>

Answer 1

You should call enableDragItem(listItem) inside generateWords() after appending the item: 追加项目后，应在generateWords()内部调用enableDragItem(listItem) ：

 function generateWords() { var inputedString = document.getElementById("stringInput").value; var splitStringArray = inputedString.split(" "); for (var i = 0; i < splitStringArray.length; i++) { var listItem = document.createElement("li"); var textNode = document.createTextNode(splitStringArray[i]); document.getElementById("columns").appendChild(listItem); var attrClass = document.createAttribute("class"); attrClass.value = "column"; listItem.setAttributeNode(attrClass); document.getElementById("columns").appendChild(listItem); enableDragItem(listItem); // call it here var headerItem = document.createElement("header"); var columns = document.getElementsByClassName("column"); for (var j = 0; j < columns.length; j++) { headerItem.appendChild(textNode); columns[j].appendChild(headerItem); } } } function enableDragSort(listClass) { const sortableLists = document.getElementsByClassName(listClass); Array.prototype.map.call(sortableLists, (list) => { enableDragList(list) }); } function enableDragList(list) { Array.prototype.map.call(list.children, (item) => { enableDragItem(item) }); } function enableDragItem(item) { item.setAttribute('draggable', true) item.ondrag = handleDrag; item.ondragend = handleDrop; } function handleDrag(item) { const selectedItem = item.target, list = selectedItem.parentNode, x = event.clientX, y = event.clientY; selectedItem.classList.add('drag-sort-active'); let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y); if (list === swapItem.parentNode) { swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling; list.insertBefore(selectedItem, swapItem); } } function handleDrop(item) { item.target.classList.remove('drag-sort-active'); } (() => { enableDragSort('drag-sort-enable') })();

 #columns { list-style-type: none; margin: 20px; display: -webkit-inline-box; } .column { width: 162px; padding-bottom: 5px; padding-top: 5px; padding-right: 5px; text-align: center; cursor: move; } .column header { height: 20px; width: 150px; color: black; background-color: #ccc; padding: 5px; border-bottom: 1px solid #ddd; border-radius: 10px; border: 2px solid #666666; } .column:hover { background: red; }

 <ul id="columns" class="drag-sort-enable"> <li class="column"> <header>Not dynamic</header> </li> <li class="column"> <header>Also NOT dynamic</header> </li> </ul> <form> Enter String to generate words:<input type="text" id="stringInput" name="stringInput" /><br/> </form> <button onclick="generateWords()">Generate Words</button>

拖放排序不适用于动态元素

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-07-23 10:59:06

拖放排序不适用于动态元素

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-07-23 10:59:06

解决方案1
2 已采纳 2019-07-23 10:59:06