javascript - Internet Explorer 9 Drag and Drop: Drop-Event not working on div as target - Stack Overflow

admin管理员组

文章数量:1025485

I've got a couple of divs which are ordered horizontally and draggable. The inside of each div is always an input + some action buttons. The goal is to allow a user to change the order of the divs via drag and drop. It's working fine in all Browsers except for IE9, which has an issue with dropping the current element to its new position.

When I release the mouse over the div itself, it won't work. But if I release the mouse over a button or input field within the div it's working fine.

See this in action: /

The magic of drag and drop starts at line 181. Try to press the last button with the bullet and drag it over another div. In e.g. Chrome it will work fine, but in IE9 you will need to drop the element over a button or the input field.

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 (the important part)

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();
    }
}

How can I avoid this?

I've got a couple of divs which are ordered horizontally and draggable. The inside of each div is always an input + some action buttons. The goal is to allow a user to change the order of the divs via drag and drop. It's working fine in all Browsers except for IE9, which has an issue with dropping the current element to its new position.

When I release the mouse over the div itself, it won't work. But if I release the mouse over a button or input field within the div it's working fine.

See this in action: http://jsfiddle/aouamurj/

The magic of drag and drop starts at line 181. Try to press the last button with the bullet and drag it over another div. In e.g. Chrome it will work fine, but in IE9 you will need to drop the element over a button or the input field.

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 (the important part)

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();
    }
}

How can I avoid this?

• javascript
• drag-and-drop
• internet-explorer-9

Share Improve this question Follow asked Sep 3, 2014 at 11:46 Andreas RemdtAndreas Remdt 65511 gold badge99 silver badges1616 bronze badges 1

• No, I didn't. It's a while ago, but I think I sticked to a button solution instead of a div. – Andreas Remdt Commented Nov 28, 2014 at 17:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to enable Drag and Drop feature to your Browser IE.

Please follow the step to enable Drag and Drop for IE.

1. Go to Tools.
2. -> Go to Internet Options.
3. -> Go to Security tab.
4. -> Click on Custom level...
5. -> search for Drag and Drop Settings and Click on Enables.
6. -> click Ok.

I've got a couple of divs which are ordered horizontally and draggable. The inside of each div is always an input + some action buttons. The goal is to allow a user to change the order of the divs via drag and drop. It's working fine in all Browsers except for IE9, which has an issue with dropping the current element to its new position.

When I release the mouse over the div itself, it won't work. But if I release the mouse over a button or input field within the div it's working fine.

See this in action: /

The magic of drag and drop starts at line 181. Try to press the last button with the bullet and drag it over another div. In e.g. Chrome it will work fine, but in IE9 you will need to drop the element over a button or the input field.

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 (the important part)

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();
    }
}

How can I avoid this?

I've got a couple of divs which are ordered horizontally and draggable. The inside of each div is always an input + some action buttons. The goal is to allow a user to change the order of the divs via drag and drop. It's working fine in all Browsers except for IE9, which has an issue with dropping the current element to its new position.

When I release the mouse over the div itself, it won't work. But if I release the mouse over a button or input field within the div it's working fine.

See this in action: http://jsfiddle/aouamurj/

The magic of drag and drop starts at line 181. Try to press the last button with the bullet and drag it over another div. In e.g. Chrome it will work fine, but in IE9 you will need to drop the element over a button or the input field.

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 (the important part)

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();
    }
}

How can I avoid this?

• javascript
• drag-and-drop
• internet-explorer-9

Share Improve this question Follow asked Sep 3, 2014 at 11:46 Andreas RemdtAndreas Remdt 65511 gold badge99 silver badges1616 bronze badges 1

• No, I didn't. It's a while ago, but I think I sticked to a button solution instead of a div. – Andreas Remdt Commented Nov 28, 2014 at 17:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to enable Drag and Drop feature to your Browser IE.

Please follow the step to enable Drag and Drop for IE.

1. Go to Tools.
2. -> Go to Internet Options.
3. -> Go to Security tab.
4. -> Click on Custom level...
5. -> search for Drag and Drop Settings and Click on Enables.
6. -> click Ok.

本文标签： javascriptInternet Explorer 9 Drag and Drop DropEvent not working on div as targetStack Overflow