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 ），因為邊距在頂部和底部（左右相同）。