Question

尽管有很多谷歌搜索，但我一直在为这种奇怪的行为撕开我的头发！

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

我相信它可能与我在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',
  })

Answer 1

终于解决了！

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

不确定这是我的无能还是特制的功能＆＃39;但是将项目的宽度设置为绝对像素数，将我排除在外。

Answer 2

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

jQuery UI Drag and Drop：Target选择了不正确的可放置区域

2 个答案: