Jquery UI Draggable 添加了 CSS 的 Scale Transition 问题

Posted 2023-05-08

【中文标题】Jquery UI Draggable 添加了 CSS 的 Scale Transition 问题

【英文标题】：Jquery UI Draggable with Addition of CSS's Scale Transition Issue

【发布时间】：2015-09-01 19:11:05

【问题描述】：

所以，我正在开发一个围绕 jQuery UI 的 Draggable 功能构建的响应式 Web 工具。还有 CSS 的 transition: scale(X, Y) 的使用。

我的问题是；当我在容器内缩放对象时，对象被限制在我可以在容器中拖动它的位置。有关此问题的物理演示，请访问此CodePen。

代码很基础，其实只有javascript如下：

$(function() 

    $('.workspaceObjects').draggable(

        containment: $('#ui_workspace'),

    );

);

所以，这似乎更像是一个 CSS 问题，但它一直困扰着我一段时间，它需要修复以允许我的网络工具进一步开发。我可以做些什么来解决这个问题？

【问题讨论】：

您缩放元素的任何特殊原因？

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

【参考方案1】：

对可拖动对象使用负边距20px 解决，并将transform-origin 居中以保持平衡。

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

见http://codepen.io/anon/pen/KpvBgJ

【讨论】：

我注意到对象跳离了鼠标。我将如何防止这种情况发生？

看看这个，可能会解决你的问题：***.com/questions/13230437/…