javascript - Protractor模拟HTML5 拖拽投放功能不成功
PHP中文网
PHP中文网 2017-04-11 11:49:02
0
0
530

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

HTML:

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

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);
    });
});
PHP中文网
PHP中文网

认证0级讲师

reply all(0)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!