Jquery UI可拖拽添加CSS的比例过渡问题

因此，我正在开发一个响应式Web工具，该工具是围绕jQuery UI的Draggable函数构建的。还有CSS的转换的使用：在这里也有scale（X，Y）。Jquery UI可拖拽添加CSS的比例过渡问题

我的问题是;当我缩放容器内的对象时，该对象受限于我可以将其拖入容器中的位置。有关此问题的实际演示，请访问此CodePen。

的代码是非常基本的，在事实只有JavaScript如下：

$(function() { 

    $('.workspaceObjects').draggable({ 

     containment: $('#ui_workspace'), 

    }); 

});

因此，它似乎更多的是CSS问题，但它已冥思苦想了我一会儿，这是需要加以解决的，以允许我的网络工具的进一步发展。我能做些什么来解决这个问题？

为什么你缩放元素什么特别的原因？ – alliuca

基本上，容器的大小会增加以使其缩放。当完成缩放时，对象的比例将增加到1，但是为了使对象（如文本和图像）的内容以较小的比例显示，该元素已被赋予比例属性。 –

用可拖动的20px的负边距求解，并以transform-origin为中心来保持平衡。

#container_object { 
    transform-origin: 50% 50%; 
    margin: -20px -20px 
}

2015-06-16 19:46:24

我注意到对象从鼠标跳开。我将如何防止这种情况？ –

看看这个，可以解决你的问题：http://stackoverflow.com/questions/13230437/jquery-ui-draggable-align-helper-to-mouse-position –

回答