JQuery-UI draggable / droppable mouse cursor does not align with element when adding a draggable element to another div when dragging

Question

I am having a problem with jQuery-UI draggable and droppable. The problem I am facing is that when I move an element from one div to another (while dragging using .append ()), it moves the element from the mouse cursor jarringly. I know that leads to the fact that the left / top css positions are no longer correct, as I am switching from one relative div to another. But I can’t fix it. I tried a few "solutions":

• Changing the position of the cursor at the position http://api.jqueryui.com/draggable/#option-cursorAt when dragging, but this only affects after mouseup and the next mousedown.
• Changing the css when dragging and dropping: http://api.jqueryui.com/draggable/#event-drag , which, although it works, is not perfect, as it has hiccups that make it flicker and move which are very annoying.
• Creating a draggable div absolute instead of relative (which locally in my base application still has "better" results, but still far from what I want, since I require the elements in the sidebar to be relative, so that they nicely add one below the other)

Here is my JSBin example of my problem: http://jsbin.com/uTuporUR/3/edit?JavaScript , the conclusion was to try to make a clear example of the problem that I encounter in the base application.

And the JavaScript code:

var positionStack = [];
var fieldview = $('#field');
var sidebarView = $('#sidebar');

$('.draggable').draggable({
  containment: ".container",
  zIndex: 100,
  cursorAt: {
    top: 20,
    left: 25
  },
  snap: '.sidebar',
  snapMode: 'inner'
});

$('#field').droppable({
  over: function(event, ui) {
    dragOverElement({event: event, ui:ui});
  }
});

 $('#sidebar').droppable({
   over: function(event, ui) {
     dragOverElement({event: event, ui:ui});
   }
 });

function dragOverElement(data){
  var me = this;
  var lastItem = positionStack[positionStack -1];
  if(lastItem !== data.event.target.id)
  {
    positionStack.push(data.event.target.id);
    var player = $(data.ui.draggable);
    var target = data.event.target.id;
    switch(target)
    {
      case ('field'):
        fieldview.append(player);
        player.css('position', 'absolute');
        break;
      case ('sidebar'):
        sidebarview.append(player);
        player.css('position', 'absolute');
        break;
    }
  }
}