无法setData（'undefined'）以允许元素拖放

Question

我正在尝试将元素放入另一个元素但它不起作用。我得到的错误是

Uncaught TypeError: Cannot read property 'setData' of undefined

和

Uncaught TypeError: Cannot read property 'getData' of undefined

第二个当然取决于第一个。

我想要放弃的元素看起来像这样：

<main id="post-it" class="post-it-content">
    <div class="vertical-stripes"></div>
    <div class="vertical-stripes"></div>
    <ul class="nav">
        <li>
            <span class="normal-text"></span>
            <span class="normal-text"></span>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="notes-footer"></li>
    </ul>
    <textarea id="notes-area"></textarea>
</main>

这是下图中的黄色外观。

然后我像这样处理拖拽：

var dragAndDrop = {
    allowDrop: function(e) {
        e.preventDefault();
    },
    drop: function(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData("text");
        e.target.appendChild(document.getElementById(data));
    },
    drag: function(e) {
        e.dataTransfer.setData("text", e.target.id);
        e.dataTransfer.effectAllowed = 'move';
    }
}

将元素绑定到相应的函数，如下所示：

$('.post-it-content').on('dragstart', dragAndDrop.drag); //Yellow note element
li.on('drop', dragAndDrop.allowDrop);
li.on('dragover', dragAndDrop.drop);

li元素是此图像中的正方形：

现在我不理解的是为什么我得到了我得到的错误，我这样做就像在这里找到的例子一样（虽然没有图片）：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop但对我来说它不起作用。任何想法为什么这不起作用？

Answer 1

这是jQuery的一个问题，您可以通过在页面加载时或使用dataTransfer之前添加以下代码来解决它

jQuery.event.props.push('dataTransfer');

示例：

jQuery.event.props.push('dataTransfer'); 
event.dataTransfer.setData("Text", event.target.id);

Answer 2

这是因为jQuery包装器。我们必须将'dataTransfer'添加到Event对象。

  

注意：jQuery 3.0中删除了$.event.props，因此您需要使用   而是$.event.addProp。

示例：

$(document).ready(function(){

    $.event.addProp('dataTransfer');

});

Answer 3

尝试设置这样的数据时，我也遇到了相同的错误

event.dataTransfer.setData("text/plain", nodeTitle);

然后我发现该事件没有任何键dataTransfer，而是在originalEvent内部有相同的键。所以我们可以像下面这样访问它

event.originalEvent.dataTransfer.setData("text/plain", nodeTitle);