【问题标题】:HTML drag and drop in IE9IE9中的HTML拖放
【发布时间】:2012-08-03 11:46:49
【问题描述】:

我尝试在 HTML 中拖放。它在除 IE9 之外的所有浏览器中运行良好(无需在低于 IE9 的环境下运行)。 IE9 中不会触发 ondrop 事件。

有什么帮助吗?这是我的代码。

jsFiddle

提前致谢。

【问题讨论】:

标签: javascript html internet-explorer drag-and-drop


【解决方案1】:

如果您将 div 替换为 a 标记,它将起作用。但是,您还应该进行一些其他更改,首先通过在onclick 事件中返回false 来确保a 标记不是可点击的链接:

<a class="div123" href="#" draggable="true"
 ondragstart="handleDragStart(event)"
 ondrop="handleDrop(event)"
 ondragover="dragoveHandler(event)"
 onclick="return false;">
    HTML5 drag and drop
</a>

其次,IE9 不接受setDatatext/plain 的参数,请改用Text 或在try...catch 中添加数据。此外,您应该确保您添加的数据实际上是文本:

e.dataTransfer.setData("Text", "" + $(e.target).index());

最后,您的handleDrop 函数需要preventDefault/return false,否则删除链接(a 元素`)的默认操作是导航到删除的 URL:

function handleDrop(e) {
    alert($(e.target).index());
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Stops redirect.
    }
    return false;
}

Here is a jsFiddle of your code which will work in IE9.

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签