jQuery使用jQuery UI使用CSS Transform进行拖动

Question

我正在尝试缩放元素并拖动此元素以执行可在所有屏幕分辨率下工作的WorkSpace。

我有它的问题，我做不到它工作正常。 如果您尝试使用小提琴代码，您可以看到正在调整大小的元素不会进入最后一个角落。 我已经阅读了很多这样的帖子（ 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 ：

演示jsFiddle

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

编辑：

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

演示jsFiddle

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

那很难看但它有效......

编辑：动态比率

好吧这是一个艰难的...这里的主要技巧是将边距设置为顶部，右侧，底部和左侧。

演示

看到这个：

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

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