jQuery UI Scrollable 中的可拖动克隆 DIV

Question

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

目标：

（完成）允许用户将笑脸或悲伤脸的多个实例从工具栏拖动到可滚动 div 中的三个 canvas 之一。这是通过克隆助手并删除原始的 droppableShape class.
（完成）当从工具栏中删除一个面时，将该面的包含设置为 canvas 它被删除的面。
（完成）当工具栏中的一张脸被放下时，继续允许用户在它包含的 canvas 周围自由移动它。
（完成）将三个 canvas 添加到可滚动的 div 以获得更多可用性。 这里介绍我的问题

问题：

当我将面部工具添加到我的可滚动 div 时，对象随 div 滚动并且不会 "stick" 到用户所需的 canvas掉在上面。

我尝试过但没有帮助的：

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

这是一个 fiddle，显示当一张脸被放到 div 上时，它是静态的，而 canvases 滚动。如果我可以提供任何进一步的信息，请告诉我，感谢您查看本文！

http://jsfiddle.net/fvec4y83/

Answer 1

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

您有很多方法可以解决您的问题，您可以删除 canvas_area 上的 scroll:

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

或将其position设置为absolute。然后你必须设置 top 坐标并调整 z-index 以便拖动时可拖动的面在它上面。那么追加到 canvases_area 会更容易，否则定位元素的计算有点难做。你可以这样做：

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

和

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

jsfiddle 最后一个：http://jsfiddle.net/hwrbLx8c/3/

jQuery UI Scrollable 中的可拖动克隆 DIV

jQuery UI Draggable Clone in Scrollable DIV

scroll

jquery-ui

jquery-ui-draggable