jQuery UI 拖放：目标拾取不正确的可放置区域答案

【问题标题】：jQuery UI Drag and Drop: Target picks up incorrect droppable areajQuery UI 拖放：目标拾取不正确的可放置区域
【发布时间】：2014-09-24 15:02:44
【问题描述】：

尽管在谷歌上搜索了很多次，但我一直因为这种奇怪的行为而抓狂！

我创建了一个可拖动的 div 元素和一系列可放置的 div，当鼠标悬停在上面时应该突出显示。当我单击并拖动时，我的助手会按预期运行，但我的可放置 div 不...鼠标右侧半屏的可放置元素是突出显示的元素，这对于 y 轴来说似乎特别奇怪似乎工作正常。这是我正在尝试做的一个简化和匿名的小提琴，它显示了这种行为：Fiddle

我相信在可拖动函数中使用 appendTo 可能与我有关，我想继续在 div 之间移动我的项目。这是我要出错的地方吗？

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

这也是小提琴中的代码：

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',
  })

【问题讨论】：

标签： javascript jquery-ui drag-and-drop droppable

【解决方案1】：

终于搞定了！

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

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

【讨论】：

【解决方案2】：

将可拖动项目的宽度设置为定义的 px(pixel) 而不是 %(percentage)

【讨论】：