Why my draggable item from an autocomplete has a bad positionning?

Question

I have an element which is an autocomplete with draggable items. I had this on en older version of my website, and it was working fine. I am creating a new version (with all new design, new jquery (and ui) versions, etc...), and I am now having an issue.

My autocomplete is at about half the page, but when I drag the item, my mouse is still at half the page, but the item is at the top left corner. (So my mouse and the item and not together). This makes moving the item not convenient.

I made a fiddle : https://jsfiddle.net/a38wj3sw/1/

jQuery('#segmentList').autocomplete({'open':function(event, ui){
    $(".ui-menu-item").draggable({
        helper: "clone",
        cursor: "move",
        appendTo: "body",
    });
    },
    'position':{ my : "right bottom", at: "right top" },
    'source':function(request, response){
        response({"value":"254","label":"Just"},{"value":"394","label":"TestCampaign - A (ID 888133)"},{"value":"9","label":"QS Segment Sharing Test (ID 549681)"});
}});

This is exactly the issue I described (I know the source part is not correct, I don't really care about this part, I just want my draggable item to be under my mouse when I move it)

Do you have an idea how I could fix this ?

Thank you !!

Answer 1

In the end, I have been able to solve the issue by adding this :

cursorAt: { left: 5, top: 5 }

Thanks !