Javascript 将拖动的元素附加到不同的div时，鼠标光标未与元素对齐

我遇到了jQuery UI可拖动和可拖放的问题。我面临的问题是：

当我将元素从一个div移动到另一个div时（在使用 .append（））它将元素移离鼠标光标 刺耳地

我知道是什么原因导致左/上css位置不再正确，因为我正在从一个相对div移动到另一个相对div。但我找不到解决办法

我尝试过很多“解决方案”：

• 拖动时更改光标位置，但这仅在鼠标悬停后和下一次鼠标向下移动时生效
• 在拖动过程中更改css：虽然拖动效果很好，但效果并不理想，因为它会打嗝，使其闪烁并向随机方向移动，这非常令人讨厌
• 将draggable div设置为绝对而不是相对（到目前为止，在我的主干应用程序中，这在本地具有“最佳”结果，但仍然不理想，因为我要求侧边栏中的元素是相对的，因此它们很好地将一个元素附加到另一个元素的下面）

这是我对我的问题的看法

JavaScript

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;
    }
  }
}

---

我知道这是一个很老的问题，但我只想加上我的2美分。我面对的正是这个问题。但我用“cursorAt”解决了这个问题。我看你已经准备好了。我只是想建议现在看这个的任何人，甚至是你-只需使用cursorAt的值，看看你是否能达到预期的结果。这里的逻辑问题：

positionStack[positionStack-1]

。我想应该是

positionStack[positionStack.length-1]

。这似乎是第一次通过时出现的问题。此处测试：