Internet Explorer 9 拖放：Drop-Event 不适用于作为目标的 div

Question

我有几个水平排列且可拖动的 div。每个 div 的内部始终是一个输入 + 一些操作按钮。目标是允许用户通过拖放更改 div 的顺序。它在所有浏览器中都可以正常工作，除了 IE9，IE9 存在将当前元素放到新位置的问题。

当我在 div 本身上释放鼠标时，它不起作用。但是，如果我将鼠标悬停在 div 内的按钮或输入字段上，它就可以正常工作。

查看实际操作： http://jsfiddle.net/aouamurj/

拖放的魔力从第 181 行开始。尝试按下项目符号的最后一个按钮并将其拖到另一个 div 上。在例如Chrome 可以正常工作，但在 IE9 中，您需要将元素放在按钮或输入字段上。

HTML

<!-- One div with a input and button inside. The button should initialize the drag -->
<div class="survey-question" draggable="true">
  <input type="text" name="q1" value="1" tabindex="1">
  <button type="button" title="Drag and drop question" data-action="drag" data-application="survey">&#9679;</button>
</div>

JavaScript（重要部分）

button.addEventListener("dragstart", dragStart);
button.addEventListener("drop", dragStop);
button.addEventListener("mousemove", handleDragMouseMove);

function dragStart(e) {
    this.dragSrcEl = e.target.parentNode;
    this.dragSrcElVal = e.target.parentNode.children[0].value;

    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text", e.target.parentNode.innerHTML);
},
function dragDrop(e) {
    e.stopPropagation();

    if (this.dragSrcEl != e.target.parentNode) {
        if (e.target.parentNode.classList.contains("survey-question")) {
            this.dragSrcEl.children[0].value = e.target.parentNode.children[0].value;
            e.target.parentNode.innerHTML = e.dataTransfer.getData("text");
        }
    }

    return false;
}

function handleDragMouseMove(e) {
    if (window.event.button === 1) {
        e.target.dragDrop();
    }
}

我怎样才能避免这种情况？

Answer 1

您必须为浏览器 IE 启用拖放功能。

请按照步骤为 IE 启用拖放功能。

1. 转到工具。
2. -> 转到 Internet 选项。
3. -> 转到安全标签。
4. -> 点击自定义级别...
5. -> 搜索拖放设置并点击启用。
6. -> 点击确定。