使用 jQuery UI 进行 CSS 变换的 jQuery 拖动

Question

我正在尝试缩放一个元素并拖动该元素以创建一个可以在所有屏幕分辨率下工作的 WorkSpace。

我遇到的问题是我做不到。如果您尝试使用 Fiddle Code，您会看到正在调整大小的元素不会到达最后一个角落。我读过很多这样的帖子 (jQuery Drag/Resize with CSS Transform Scale)，但问题是当你引用一个容器时。

带有错误示例的小提琴代码：

http://jsfiddle.net/yeD4b/4/

更新：也添加了文字

HTML

<div id="containerDragable">
<img id="img_messi" style="display: inline; position: absolute; z-index: 101; " src="http://www.elconfidencial.com/fotos/noticias_2011/2012090245messi_dentro.jpg" />

<div id="text_example">hi!</div>

CSS

  #containerDragable {
    width: 80vw; 
    height: 45vw;
    background-color: rgb(227, 227, 227);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
}

#img_messi
{
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
    position:absolute;
}
#text_example
{
    font: normal 36px arial,sans-serif;
    position:absolute;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;   
    -webkit-transform: scale(0.5);
}

JavaScript

$(function () {
        $('#img_messi').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false

        });
    });

$(function () {
        $('#text_example').draggable({
            containment: "#containerDragable", cursor: "move", scroll: false

        });
    });

谢谢！！

Answer 1

不要使用CSS 来缩放您的图像。请改用jQuery：

Demo jsFiddle

$('#img_messi').width($('#img_messi').width()/2);

编辑：

为了更好地满足您的需求，如果您必须使用scale css 属性，您应该使用这个带有负边距的简单解决方法：

Demo jsFiddle

$(this).css('margin', '0 -'+($(this).width()/2)+'px -'+($(this).height()/2)+'px 0');

这很丑陋，但它确实有效......

编辑：动态比例

好吧，这很难……这里的主要技巧是将边距设置为顶部、右侧、底部和左侧。

The demo

看到这个：

var verticalOffset = ($(this).height() - $(this).height()*ratio)*0.5;
var horizontalOffset = ($(this).width() - $(this).width()*ratio)*0.5;

这里 $(this).height() 是 DOM 的原始高度（宽度相同）。你减去它本身乘以比率，然后将整体除以 2 (*0.5)，因为边距位于顶部和底部（左右相同）。