Protractor模拟HTML5 拖拽投放功能不成功

我用protractor模拟drag and drop，浏览器没反应，为什么呢？
有什么解决办法吗？

HTML:

<div class="drag" draggable="true"></div>
<div class="drop"></div>

css:

.drag {
    width: 50px;
    height: 50px;
    background-color: lightblue;
}

.drop {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    margin-left: 200px;
}

JS:

var drag = document.querySelector('.drag');
var drop = document.querySelector('.drop');

drop.ondragover = function(e){
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
};
drop.ondrop = function(e){
    e.stopPropagation();
    this.appendChild(drag);
};

Protractor 测试代码:

describe('demo app', function() {
    beforeEach(function(){
        browser.driver.manage().window().maximize();
        browser.get('http://localhost:3000/index#/one');
        browser.waitForAngular();
    });

    it('should drag and drop into a box', function(){
        var drag = element(by.css('.drag'));
        var drop = element(by.css('.drop'));
        
        browser.actions().dragAndDrop(drag,drop).perform();
        browser.sleep(3000);
    });
});