Question

因此，每次单击图像时，我都会执行一些js代码。

images.forEach(function (image, index) {
    image.addEventListener('click', clicked);
})
let order_count = 0;

function clicked() {
    let selected = this.getAttribute('id');
    let li = document.createElement("li");
    li.classList.add("li-item");
    li.addEventListener("dragstart", dragStart);
    li.addEventListener("dragend", dragEnd);
    li.addEventListener("dragenter", dragEnter);
    li.addEventListener("dragleave", dragLeave);
    li.setAttribute("draggable", true);
    li.setAttribute("count", order_count);
    li.innerHTML = selected;
    list.append(li);
    order_count++;
    this.removeEventListener('click', clicked);
    this.children[0].remove();
}

它的作用是强制单击功能执行。在click函数中，我创建li并将其附加到ul，添加2个整数和可拖动属性，添加一些类以及事件监听器以进行拖放。这些功能如下：

function dragStart() {
    this.classList.add("dragging");
    var start = this.getAttribute("count");
    console.log("dragstart element " + start);
}


function dragEnter() {
    var entered = this.getAttribute("count");
    this.classList.add("entered");
    console.log("drag entered element " + entered);
}


function dragLeave() {
    this.classList.remove("entered");
}


// drag end event
function dragEnd() {
    var final = this.getAttribute("count");
    console.log("dragend at element " + final);
    this.classList.remove("dragging");
}

问题是：我应该如何正确指定dragend函数。假设我要开始拖动第一个元素并将其放在元素5的顶部。我希望元素2现在是元素1，元素3现在是元素2，依此类推。想仅以香草方式解决感谢您的帮助！

通过拖放更改ul li的顺序

0 个答案: