Question

我遇到了jQuery-UI draggable和droppable的问题。我面临的问题是：

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

我知道是什么原因导致左/顶css位置不再正确，因为我从一个相对div移动到另一个div。但我找不到它的修复方法。

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

在拖动时更改cursorAt位置http://api.jqueryui.com/draggable/#option-cursorAt但这仅在mouseup和下一个mousedown后生效。
在拖动过程中更改css：http://api.jqueryui.com/draggable/#event-drag虽然它有效，但它并不理想，因为它有打嗝，使其闪烁并随机移动，这非常烦人。
使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;
    }
  }
}

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

0 个答案: