Question

我有几个水平和可拖动的div。每个div的内部总是一个输入+一些动作按钮。目标是允许用户通过拖放更改div的顺序。除了IE9之外，它在所有浏览器中都能正常工作，IE9在将当前元素放到新位置时会出现问题。

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

拖放的魔力从第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启用拖放功能。

转到工具。
- ＆GT;转到 Internet选项。
- ＆GT;转到安全标签。
- ＆GT;点击自定义级别...
- ＆GT;搜索拖放设置，然后单击“启用”。
- ＆GT;点击确定。

Internet Explorer 9拖放：Drop-Event不在div上作为目标

1 个答案: