effectAllowed and copyEffect not working

by stevendwood

HTML

<div draggable="true">Drag Me!</div>

<div id="dropZoneCopy">Drop On Me to copy</div>
<div id="dropZoneMove">Drop On Me to move</div>

CSS

[draggable='true'] {
    width: 200px;
    height: 100px;
    background-color: lightBlue;
}

#dropZoneCopy, #dropZoneMove {
    width: 200px;
    height: 100px;
    margin-top: 100px;
    border: 1px solid #ADADAD;
}

JavaScript

$(function() {
    $("[draggable='true']").on("dragstart", function(e) {
        var dt =  e.originalEvent.dataTransfer;
        dt.effectAllowed = "copyMove";
        dt.setData("text", "Foo");
    });
    
    $("#dropZoneCopy").on("dragover", function(e) {
        var dt =  e.originalEvent.dataTransfer;
        dt.dropEffect = "copy";
        e.preventDefault();
    });
    
    $("#dropZoneMove").on("dragover", function(e) {
        var dt =  e.originalEvent.dataTransfer;
        dt.dropEffect = "move";
        e.preventDefault();
    });
    
});