拖放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

.gegData('Text')或.getData('Text') ？

function dropped(e){
   e.preventDefault();
   leftbox.innerHTML = e.dataTransfer.getData('Text');
}

Answer 2

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

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

这样，浏览器将停止默认事件响应（即禁止丢弃）并让您的放置操作完成。 这是我愚蠢的jsFiddle演示，说明成功。 蓝色方块是#dragapple 。

Answer 3

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);

在这里查看： https ： //github.com/fresheneesz/drip-drop

Answer 4

您需要对接收拖动的元素进行ondragover和ondrop事件，并且拖动的元素需要draggable =“true”。

例如：

<div ondragover="allowDrop(event);" ondrop="drop(event);">

function allowDrop(x) { x.preventDefault(); }

function drop(x) {  x.preventDefault(); var data=x.dataTransfer.getData("text"); ... }