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

谢谢

- Kristian Daugaard

---

e.dataTransfer.gegData('Text');. gegData？ - Musa

它是做什么的？还是不做什么？ - Lee Meador

通过这个，你应该能够将一个 div 中的图片拖放到另一个 div 中。 - Kristian Daugaard

"dragapple" 只在 Mac 上可用吗？ - adeneo

Answer 1

.gegData('Text') or .getData('Text')?

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

- RJ Cuthbertson

---

抱歉问题中有个打字错误。实际代码中应该是“getData”，但它仍然不起作用 :) - Kristian Daugaard

图片是可拖动的，它没有该属性，但这应该不是必需的。 - Kristian Daugaard

img 标签不需要 draggable="true" 属性，因为它是默认的。 - Toping

那么，将元素添加到目标而不是将其设置为 "innerHtml" 呢？ var data = e.dataTransfer.getData('Text'); e.target.appendChild(data); 就像 http://www.w3schools.com/html/html5_draganddrop.asp。 - RJ Cuthbertson

我想我可以做到，只是非常令人沮丧。我一直在按照视频教程编写这个脚本，但它对我来说根本不起作用，而且我已经检查并匹配了代码4次。 - Kristian Daugaard

Answer 2

有时候我们总是被一些小细节难住。在你的"dragover"事件监听器定义中，你需要提供一个参数列表()给e.PreventDefault：

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

那样，浏览器将停止默认事件响应（即禁止拖放），并允许您的拖放操作完成。这是我愚蠢的jsFiddle演示，展示了成功的链接。蓝色正方形是#dragapple。

- Austin Mullins

---

终于！我一直在为此苦恼。谢谢你结束了我的痛苦。我知道“drop”事件没有被触发，但不知道原因。 - ThinkingStiff

@KristianDaugaard 这是 preventDefault() 后面的 () 括号。 - ThinkingStiff

不在您包含的代码中。它只是说e.preventDefault，没有()。 - Austin Mullins

哦，谢谢！我在我的prevent default函数中只需要加上();就可以了！终于成功了！ - Kristian Daugaard

LOL，从技术上讲这不是语法错误。e.preventDefault返回函数本身，但然后什么也不做。这是逻辑错误。 - Austin Mullins

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

- B T

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

- Toping

---

拖放效果不需要 dragover。Javascript 的 drop 效果和 dragover 效果是两个不同的功能。在我的情况下，dragover 大多仅用于样式，而我还没有为其设置样式。至于 draggable true，那并不是问题，因为它是默认的。 - Kristian Daugaard

@KristianDaugaard 你试过了吗？在我的应用程序中，preventDefault是必需的才能释放对象。 - Toping

我刚试了一下删除我的preventDefault()，但没有帮助。我想我可能不得不使用内联drop属性，尽管我一直在试图避免这样做。 - Kristian Daugaard

@KristianDaugaard 你尝试将它从图像更改为简单文本以查看是否有效吗？ - Toping