javascript - jQuery UI 拖放 : Target picks up incorrect droppable area

Question

尽管谷歌搜索了很多次，我还是对这种奇怪的行为感到恼火!

我创建了一个可拖动的 div 元素，以及一系列可放置的 div，悬停在这些元素上时应突出显示。当我单击并拖动时，我的助手会按预期运行，但我的可放置 div 不会...鼠标右侧半个屏幕的可放置元素被突出显示，这看起来特别奇怪，因为 y 轴似乎工作正常。这是我正在尝试做的一个简化和匿名的 fiddle ，它显示了行为:Fiddle

我相信这可能与我在可拖动函数中使用 appendTo 有关，我想保留它以跨 div 移动我的项目。这是我出错的地方吗？

我的很多谷歌搜索发现人们在页面上的滚动上挣扎，但我这里根本没有任何 x 轴滚动。

这是也在 fiddle 中的代码:

var bucket_string = "#Bucket1";
var div_defect = document.createElement("div");
div_defect.className = "item";
div_defect.innerHTML = "Item 1";
$(bucket_string).append(div_defect);

$('.item').draggable({
    appendTo: '#workspace',
    helper: 'clone',
    cursor: 'move',
    revert: true,
});


  $('.item').bind("drag", function (event, ui) {
      var width = $('.item').width();
      ui.helper.css("width", width);
      ui.helper.css("font-size", "x-small");
  });

  $('.Bucket').droppable({
      accept: '.item',
      hoverClass: 'hovered',
  })

Answer 1

终于解决了!

发生这种情况是因为(根据发布的 fiddle )我的 CSS 将我的可拖动项目的宽度设置为其 parent 的 100%。当我在克隆上使用 appendTo: '#workspace' 时，它们继承了整个工作区的宽度，瞬间将它们的位置抛出半个屏幕。

不确定这是我的无能还是特制的“功能”，但将项目的宽度设置为绝对像素数让我满意。