Question

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

目标：

（完成）允许用户将多个笑脸或悲伤脸部的实例从工具栏拖动到可滚动div中的三个画布之一上。这是通过克隆帮助程序并删除orignal droppableShape类来完成的。
（完成）当工具栏中的面部被删除时，将该面部的收容设置为放置它的画布。
（完成）当工具栏中的面部掉落时，继续允许用户围绕其所包含的画布自由移动。
（完整）将三个画布添加到可滚动的div中以获得更多可用性。 这是我的问题所在

问题：

当我将face工具添加到我的可滚动div中时，对象会以div滚动，并且不会＆＃34;坚持＆＃34;到用户放置它的所需画布。

我尝试过但没有帮助：

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

这是一个小提琴，显示当脸部落在div上时，它是静态的，而画布滚动。如果我能提供任何进一步的信息，请告诉我，并感谢您对此的了解！

http://jsfiddle.net/fvec4y83/

Answer 1

您faces element具有absolute position样式，这意味着它们依赖于第一个relative或absolute父级。在您的情况下，这将是html元素。但是，由于您scroll上有canvases_area，因此在滚动时，html在canvases_area到达顶部或底部之前不会影响scroll。

您有很多方法可以解决您的问题，您可以删除canvas_area上的#canvases_area { //overflow-y: scroll; height:1120px; float: right; }：

position

或将其absolute设置为top。然后，您必须设置z-index坐标并调整#canvases_area { overflow-y: scroll; height:1120px; float: right; position: absolute; top:80px; z-index:-1; }，以便在拖动时可拖动的面部位于其上方。然后将更容易附加到canvases_area，否则计算元素的位置有点难。你可以这样做：

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

和

\\d

jsfiddle for last one：http://jsfiddle.net/hwrbLx8c/3/

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

1 个答案: