jQuery UI拖放:Target拾取不正确的可丢弃区域

jQuery UI Drag and Drop: Target picks up incorrect droppable area

本文关键字：区域 不正确 拖放 UI Target jQuery      更新时间：2023-09-26

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

我已经创建了一个可拖动的div元素，以及一系列可丢弃的div，当悬停在上面时，这些div应该高亮显示。当我单击并拖动时，我的辅助对象的行为与预期的一样，但我的可丢弃div不。。。鼠标右侧半个屏幕上的可丢弃元素是高亮显示的元素，这似乎特别奇怪，因为y轴似乎工作正常。以下是我试图做的一个简化和匿名的小提琴，展示了我的行为：小提琴

我相信这可能与我在draggable函数中使用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',
  })

终于解决了！

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

不确定这是我的无能还是一个特制的"功能"，但将项目的宽度设置为绝对像素数会让我感到困惑。

将可拖动项目的宽度设置为定义的px（像素），而不是%（百分比）

相关文章：