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

• 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

1 Answer 1

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.