拖放Javascript HTML5

我正在尝试使用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);

函数doFirst（）{
mypic=document.getElementById（'dragapple'）；
mypic.addEventListener（“dragstart”，startDrag，false）；
leftbox=document.getElementById（'leftbox'）；
addEventListener（“dragenter”，函数（e）{e.preventDefault}，false）；
addEventListener（“dragover”，函数（e）{e.preventDefault}，false）；
leftbox.addEventListener（“drop”，drop，false）；
}
功能启动图（e）{
var代码=“”；
e、 dataTransfer.setData（'文本'，代码）；
}
函数删除（e）{
e、 预防默认值（）；
leftbox.innerHTML=e.dataTransfer.getData（'Text'）；
}
window.addEventListener（“加载”，doFirst，false）；

谢谢

.gegData（'Text'）

或

.getData（'Text'）

---

您需要将ondragover和ondrop事件添加到接收拖动的元素，并且拖动的元素需要是draggable=“true”

例：

函数allowDrop（x）{x.preventDefault（）；}
函数drop（x）{x.preventDefault（）；var data=x.dataTransfer.getData（“text”）；…}

最终吸引我们的总是一些小事。在“dragover”事件侦听器的定义中，需要为e.PreventDefault提供参数列表

（）

：

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

---

这样，浏览器将停止默认事件响应（即dis allow drop），并让您的drop操作完成。这是我的成功。蓝色的方块是

#dragapple

html5拖放api有很多奇怪的边缘案例。我刚刚编写了一个非常通用的低级api，它使拖放变得简单。以下是您在示例中的做法：

function doFirst(){
    var mypic = document.getElementById('dragapple')
    dripDrop.drag(mypic, {
      image: true,
      start: function(setData) {
        setData('Text', '<img id="dragapple" src="stealeripsum.png">')            
      }
    })

    var leftbox = document.getElementById('leftbox')
    dripDrop.drag(leftbox, {
      drop: function(data) {
        leftbox.innerHTML = data.Text        
      }
    })
}

window.addEventListener("load", doFirst, false);

函数doFirst（）{
var mypic=document.getElementById（'dragapple'）
dripDrop.drag（mypic{
图片：没错，
开始：功能（设置数据）{
setData（'文本'，''）
}
})
var leftbox=document.getElementById（'leftbox'）
dripDrop.drag（左框{
drop：函数（数据）{
leftbox.innerHTML=data.Text
}
})
}
window.addEventListener（“加载”，doFirst，false）；

---

在这里查看：

e.dataTransfer.gegData（'Text'）
gegData
？它做什么？还是不行？这样你就可以将图片从一个div拖放到另一个div了。
dragapple
只在Mac上工作？？很抱歉，这是问题中的一个输入错误。这就是实际代码中的“getData”，它仍然不能工作：）图像是可拖动的，它没有属性，但不需要。img不需要draggable=“true”，它的默认值。那么，将元素附加到目标而不是将其设为
innerHtml
<代码>变量数据=e.dataTransfer.getData（'Text'）
e.target.appendChild（数据）就像我想我可以做到的那样，这是非常令人沮丧的。我一直在遵循这个脚本的视频教程，它根本不适合我，我已经检查并匹配了4次代码。dragover不需要删除效果。Javascripts的drop效应和dragover效应是两个不同的函数。在我的案例中，dragover主要只用于样式化，而我还没有对它进行样式化。关于draggable true，这不是问题，因为它是默认值。@KristianDaugaard，你试过了吗？在我的应用程序中，释放对象需要preventDefault。我只是尝试删除preventDefault（），但没有任何帮助。我想我可能不得不使用内联drop属性，尽管我试图避免它。@KristianDaugaard您是否尝试过将它从img更改为简单文本以查看它是否有效？最后！我一直在为此绞尽脑汁。谢谢你结束了我的痛苦。我知道
drop
事件没有触发，但不知为什么。@KristianDaugaard这是
preventDefault（）
末尾的
参数。不在您包含的代码中。它只说了
e.preventDefault
，没有
（）
。哦，谢谢！！我所需要的只是（）；在我的防止默认功能！最后哈哈，从技术上讲这不是一个语法错误。e、 preventDefault返回函数本身，但不执行任何操作。这是一个逻辑错误。
leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false);

function doFirst(){
    var mypic = document.getElementById('dragapple')
    dripDrop.drag(mypic, {
      image: true,
      start: function(setData) {
        setData('Text', '<img id="dragapple" src="stealeripsum.png">')            
      }
    })

    var leftbox = document.getElementById('leftbox')
    dripDrop.drag(leftbox, {
      drop: function(data) {
        leftbox.innerHTML = data.Text        
      }
    })
}

window.addEventListener("load", doFirst, false);