javascript - 无法设置Data( 'undefined')以允许元素拖放

Question

我试图将一个元素放入另一个元素中，但它不起作用。我得到的错误是

未捕获类型错误:无法读取未定义的属性“setData”

和

未捕获类型错误:无法读取未定义的属性“getData”

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

我试图删除的元素如下所示:

<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';
    }
}

并将元素绑定(bind)到相应的函数，如下所示:

$('.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);