Javascript 拖放；放弃Html5`UL`

我刚刚制作了一个脚本，其中我拖放了一个无序列表

下面是我的示例（）：

Javascript:

var dragSrcEl=null;

function handleDragStart(e){
    this.style.opacity=0.4; // this / e.target is the source node.
    //Calling e.dataTransfer.setData(format, data) will set the object's content to the mimetype and data payload passed as arguments.
    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 / e.target is the previous hover target.
    this.classList.remove('over');
}

function handleDrop(e){
    //this //e.target is current target element
    if(e.stopPropagation){
        e.stopPropagation; //stops the browser 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');
    }
    //see the section on the DataTransfer
    return false;
}

var cols=document.querySelectorAll('#apps_list .column');
function handleDragEnd(e){
    //this /e.target is the source node;
    [].forEach.call(cols, function(col){
        col.classList.remove('over');
    });
}

[].forEach.call(cols, function(col){
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragenter', handleDragEnter, false)
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('dragleave', handleDragLeave, false);
    col.addEventListener('drop', handleDrop, false);
    col.addEventListener('dragend', handleDragEnd, false);
});

function handleDragEnter(e){
    // this / e.target is the current hover target.
    this.classList.add('over');
    this.style.opacity=0.4; //adding the opacity here fixed the problem for the Drag enter
}

function handleDragEnd(e){
    //this /e.target is the source node;
    [].forEach.call(cols, function(col){
        col.classList.remove('over');
        col.style.opacity = 1; //adding opacity here resets the opacity after the end of the drop
    });
}

CSS:

HTML:

Skype是一款用于与朋友聊天的应用程序



永远不要让别人知道你的消息



让它活下去，给它生命



让它活下去，给它生命



让它活下去，给它生命



让它活下去，给它生命

---

问题是，当我完成拖放时，事件

handleDragEnd

似乎不起作用，并且不透明度停留在

0.4

不透明度停留在0.4，因为您没有将其更改为1 在

handleDragEnd

函数中添加

col.style.opacity=1

，如下所示

function handleDragEnd(e){
    //this /e.target is the source node;
    [].forEach.call(cols, function(col){
        col.classList.remove('over');
        col.style.opacity = 1; // reset opacity here
    });
}

---

问题解决，更改：

Javascript:

var dragSrcEl=null;

function handleDragStart(e){
    this.style.opacity=0.4; // this / e.target is the source node.
    //Calling e.dataTransfer.setData(format, data) will set the object's content to the mimetype and data payload passed as arguments.
    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 / e.target is the previous hover target.
    this.classList.remove('over');
}

function handleDrop(e){
    //this //e.target is current target element
    if(e.stopPropagation){
        e.stopPropagation; //stops the browser 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');
    }
    //see the section on the DataTransfer
    return false;
}

var cols=document.querySelectorAll('#apps_list .column');
function handleDragEnd(e){
    //this /e.target is the source node;
    [].forEach.call(cols, function(col){
        col.classList.remove('over');
    });
}

[].forEach.call(cols, function(col){
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragenter', handleDragEnter, false)
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('dragleave', handleDragLeave, false);
    col.addEventListener('drop', handleDrop, false);
    col.addEventListener('dragend', handleDragEnd, false);
});

function handleDragEnter(e){
    // this / e.target is the current hover target.
    this.classList.add('over');
    this.style.opacity=0.4; //adding the opacity here fixed the problem for the Drag enter
}

function handleDragEnd(e){
    //this /e.target is the source node;
    [].forEach.call(cols, function(col){
        col.classList.remove('over');
        col.style.opacity = 1; //adding opacity here resets the opacity after the end of the drop
    });
}

CSS:

---

谢谢大家。

你们怎么会有200分却不知道这是怎么回事？？：让我们把你的密码贴在这里。外部链接只应该是补充的。问题和答案应该是完全独立的。我知道我想简化的规则代码太长了，对不起。如果与问题相关，代码永远不会太长。好的，谢谢你的否决票：D，但请提供解决方案，谢谢我这么做了，但没有起作用，这就像手柄不工作。它在第一次工作时，不透明度保持在

1

然后当你拖放当前悬停的不透明度

li

时，不要更改为

0.4

你能详细说明预期的行为吗？这有点过分了。只需向dragend事件处理程序添加1行-

dragSrcEl.style.opacity=1
div.apps_box ul#apps_list .over{
    border: 2px dashed #000; //removing opacity from here helped to fix the problem, because adding it here is the same as adding it on the start handler.
}