Javascript – HTML5 drag and drop not working on IE11

Got HTML5 native drag and drop applied, drop is no working with IE, working well with chrome and firefox.

the dragging appears to be working but drop isnt happaning on IE.

another small question – in IE i got a half transparent square around my draggable element, but its background is transparent(the image is done like that), and on chrome/firefox i dont have that square and the image look without any background while dragging.

this is the drop area:

<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>

this is the draggable element:

<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>

function drag_start(e) 
    {
        e.dataTransfer.effectallowed = 'copy';
        e.dataTransfer.dropEffect = 'copy';
        e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
    }

function drag_enter(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
        }

function drag_leave(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        }


function drag_drop(e) {
        var element = e.dataTransfer.getData("Text"); // the player
        if (e.preventDefault) {
            e.preventDefault();
        }
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
            alert("invalid Move");
            return false;
        }

        e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        moveHandler(element, e.target.getAttribute('id'));
    }

function drag_end(e) {
        e.dataTransfer.effectallowed = 'copy';
        alert("drop end")
        }
    }
}

I remove some code of printing stuff to make the code more shorter.