Unable to dragAndDrop using Protractor

Question

I am unable to perform drag and drop function in my application. But something I observed, dragAndDrop is not happening it seems. Can someone look into my function and help me if anything I missed.

Try-1

    this.dragAttributetoColumn =  function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        browser.actions().
        mouseDown(dragElement).
        mouseMove(dropElement).
        mouseUp().
        perform();
    }

Try-2

    this.dragAttributetoColumn =  function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        browser.actions().dragAndDrop(dragElement, dropElement).mouseUp().perform();
}

Try-3

    this.dragAttributetoColumn =  async function () {
        let dragElement = element(by.xpath("//span[@class='drag-icon']"));
        let dropElement = element(by.xpath("//div[@id='column']//mat-form-field"));
        await browser.actions().dragAndDrop(await dragElement.getWebElement(), await dropElement.getWebElement()).perform();
    }

Using Sergey's suggestion i have implemented my code but still I am not able to do the drag and drop.

    it('verify drag and drop', () => {
        let dragElement = element(by.css("span[class='drag-icon']"));
        let dropElement = element(by.css("div[id='column'] mat-form-field"));
        //my code

        //drag and drop attribute
        dragAndDrop(dragElement,dropElement);
    });
    

function dragAndDrop($element, $destination) {
    return browser
        .actions()
        .mouseMove($element)
        .perform()
        .then(() =>
            browser
                .actions()
                .mouseDown($element)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseMove($destination)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseUp()
                .perform()
        );
}

Answer 1

Finally, I got the Solution. Application is using Angular and Material for drag and drop.

it('verify drag and drop', async () => {
        let dragElement = element(by.css("#listElement"));
        let dropElement = element(by.css(".cdk-drop-list"));
        //my code

        //drag and drop attribute
        await dragAndDrop(dragElement,dropElement);
    });
function dragAndDrop($element, $destination) {
    return browser
        .actions()
        .mouseMove($element)
        .perform()
        .then(() =>
            browser
                .actions()
                .mouseDown($element)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseMove($destination)
                .perform()
        )
        .then(() =>
            browser
                .actions()
                .mouseUp($destination)
                .perform()
        );
}