protractor: HTML5 dragging does not always work on Chrome

Following test case:

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
        browser.get('http://tombatossals.github.io/angular-leaflet-directive/examples/center-example.html');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var el = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][1]'));
            ptor.actions().dragAndDrop(el.find(),{x:40,y:40}).perform();
            expect(element(by.model("london.lat")).getAttribute("value")).not.toBe('51.505');
        });
    });
});

The test does not seem to drag the map. There is also no drop possible with the following test page: http://html5demos.com/drag that seems the same problem.

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
       browser.get('http://html5demos.com/drag');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var item = element(by.xpath('//*/a[@id="one"]'));
            var dest = element(by.xpath('//*/div[@id="bin"]'));
            ptor.actions().dragAndDrop(el.find()dest.find()).perform();
            ptor.sleep(6000);
        });
    });
});

The drag and drop does even not work with mouseevents:

describe('Drag materials', function() {
    ptor = protractor.getInstance();
    beforeEach(function() {
       browser.get('http://html5demos.com/drag');
    });
    describe('draggable map', function() {
        it('Drag Test', function() {
            var item = element(by.xpath('//*/a[@id="one"]'));
            var dest = element(by.xpath('//*/div[@id="bin"]'));
            ptor.actions().mouseMove(item.find()).
                mouseDown(item.find()).
                mouseMove(dest.find()).
                mouseUp(dest.find()).
                perform();
            ptor.sleep(6000);
        });
    });
});