javascript - 拖放 Javascript HTML5

Question

我正在尝试使用 javascript 和 HTML5(不使用 jQuery)创建拖放功能。我只是看不出有什么问题。看了很长时间，看不出我失败的地方。有人能找到吗？

    function doFirst(){
    mypic = document.getElementById('dragapple');
    mypic.addEventListener("dragstart", startDrag, false);

    leftbox = document.getElementById('leftbox');
    leftbox.addEventListener("dragenter", function(e){e.preventDefault}, false);
    leftbox.addEventListener("dragover", function(e){e.preventDefault}, false);
    leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){
    var code = '<img id="dragapple" src="stealeripsum.png">';
    e.dataTransfer.setData('Text', code);
}
function dropped(e){
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false);

谢谢

Answer 1

最终捕获我们的总是小事。在“dragover”事件监听器的定义中，您需要向 e.PreventDefault 提供一个参数列表 ():

leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);

这样，浏览器将停止默认事件响应(即不允许删除)并让您的删除操作完成。这是我的 silly jsFiddle demo说明成功。蓝色方 block 是 #dragapple。