Jquery ui 可滚动DIV中的jQuery UI可拖动克隆

我一直在从事一个需要使用jQuery UI拖放功能的项目。当在混合中引入一个可滚动的div时，我的代码并没有按预期工作，任何帮助都将不胜感激

目标：

• （完成）允许用户将笑脸或悲伤脸的多个实例从工具栏拖到可滚动div中的三个画布之一上。这是通过克隆辅助对象并删除原始droppableShape类完成的

• （完成）当工具栏中的面被删除时，将该面的包含设置为其被放置在画布上

• （完成）当工具栏中的面被放下时，继续允许用户在其所在的画布上自由移动

• （完成）将三个画布添加到可滚动的div中，以提高可用性。这就是我的问题所在

问题是：

• 当我将face工具添加到可滚动的div中时，对象会随div一起滚动，而不会“粘”到用户放置它的所需画布上

我尝试过但没有帮助的：

// Make shapes droppable
$(".droppableShape").draggable({
     helper:'clone',
     scrollable: false,
     appendTo: '#canvases_area'
});

这是一把小提琴，显示当一张脸被放在div上时，画布滚动时它是静止的。请让我知道，如果我可以提供任何进一步的信息，并感谢你看这个

---

您是

面元素

具有

绝对位置

样式，这意味着它们依赖于第一个

相对

或

绝对

父元素。在您的例子中，这将是

html

元素。但是，由于您的

画布区域上有
滚动
，因此当此滚动时，它不会影响
html
，直到
画布区域
到达顶部或底部

您有许多解决问题的方法，您可以删除画布上的
滚动
：

#canvases_area {
    //overflow-y: scroll; 
    height:1120px;
    float: right;
}

或者将其
位置
设置为
绝对
。然后您必须设置
top
坐标并调整
z-index
，以便拖动时可拖动面位于其上方。这样附加到canvas_区域就更容易了，否则定位元素的计算就有点困难了。你可以这样做：

#canvases_area {
    overflow-y: scroll; 
    height:1120px;
    float: right;
    position: absolute;
    top:80px;
    z-index:-1;
}

及

最后一个的JSFIDLE：

var newTop = ui.offset.top-$(this).parent().offset().top+$(this).parent().scrollTop()+(ui.draggable.height()/2)

$(this).parent().append(new_field);
 new_field.css({'top': newTop})