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

.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"); ... }