0
我開始學習JavaScript，並創建了一個基本的待辦事項列表/任務列表。我設法實現編輯和刪除單個元素，現在我想實現拖動&刪除。我設法做到這一點，但交換1元素刪除/編輯停止工作後，老實說，我不知道如何解決這個問題。如何在保留其他函數（刪除，編輯，添加）的同時在JavaScript中實現拖放操作？
這裏是我的html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>To Do List</title>
<style>
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}
/* Edit Task */
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
</style>
</head>
<h>My list:</h>
<body>
<p>
<input id="new-item" type="text">
<button>Add</button>
</p>
<ul id="list">
</ul>
<script src="v2.js"></script>
</body>
</html>
這裏是我的javascript代碼：
var taskInput = document.getElementById("new-item");
var addButton = document.getElementsByTagName("button")[0];
var listHolder = document.getElementById("list");
//New Task List Item
var createNewElement = function(taskString) {
//Create list item
var listItem = document.createElement("li");
//label
var label = document.createElement("label");
//edit input
var editInput = document.createElement("input");
//edit button
var editButton = document.createElement("button");
//delete button
var deleteButton = document.createElement("button");
//Modify each element
editInput.type = "text";
editButton.innerText = "\u270E";
editButton.className = "edit";
deleteButton.innerText = "\u2716";
deleteButton.className = "delete";
label.innerText = taskString;
//Append each element
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
//Addd a new task into the list
var addTask = function() {
//Create a new list item with the text from input
var listItem = createNewElement(taskInput.value);
listItem.classList.add("column");
listItem.setAttribute("draggable", "true");
listHolder.appendChild(listItem);
// Append listItem to bindTaskEvents
bindTaskEvents(listItem);
//Drag and drop
listItem.addEventListener('dragstart', handleDragStart, false);
listItem.addEventListener('dragenter', handleDragEnter, false)
listItem.addEventListener('dragover', handleDragOver, false);
listItem.addEventListener('dragleave', handleDragLeave, false);
listItem.addEventListener('drop', handleDrop, false);
listItem.addEventListener('dragend', handleDragEnd, false);
//Reset input value
taskInput.value = "";
}
//Edit an existing task
var editTask = function() {
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
//if parent class is .editMode
if (containsClass) {
//switch from .editMode
//make label text become the input's value
label.innerText = editInput.value;
} else {
//switch to .editMode
//the input values become the label's text
editInput.value = label.innerText;
}
//toggle .editMode on parrent
listItem.classList.toggle("editMode");
}
//Delete existing task
var deleteTask = function() {
var listItem = this.parentNode;
var ul = listItem.parentNode;
//Remove the parent list item from the ul
ul.removeChild(listItem);
}
//bind buttons to events
var bindTaskEvents = function(taskListItem) {
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//bind editTask to editButton
if (editButton == null)
return;
editButton.onclick = editTask;
//bind editTask to deleteButton
deleteButton.onclick = deleteTask;
}
//Set the click handler to the addTask function
addButton.addEventListener("click", addTask);
//Cycle over listHolder ul list items
for (var i = 0; i < listHolder.children.length; i++) {
bindTaskEvents(listHolder.children[i]);
}
var dragSrcEl = null;
function handleDragStart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function handleDragEnter(e) {
// this/e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over'); // this/e.target is previous target element.
}
function handleDrop(e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // Stops some browsers from redirecting.
}
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this) {
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function handleDragEnd(e) {
// this/e.target is the source node.
}
謝謝您的幫助！
這mayhelp你https://www.html5rocks.com/en/tutorials/dnd/basics/ – gusaindpk
@gusaindpk這就是我用來實現拖放操作guilde。 – Netheru
確定會檢查它.. – gusaindpk