Question

当前，我的用户可以输入一个字符串，该字符串被拆分为单词，用户可以对这些单词重新排序。

当元素不是动态元素时，重新排序可以正常工作，但是我要添加到DOM中的元素无法拖放。

我已经仔细检查过，所有相同的属性都将应用于动态创建的元素，就像应用于列表中已经存在的元素一样。

这是我的代码：

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

在添加项目后，您应该在/api/user/new内致电enableDragItem(listItem)：

generateWords()

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

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

1 个答案: