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：

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），因为边距位于顶部和底部（左右相同）。

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

1 个答案: