css масштабируемый (-webkit-transform) div и его дочерний элемент с jquery ui, который можно перетаскивать, перемещается не так, как курсор во время перетаскивания

У меня есть окно с ребенком внутри. Ребенок должен двигаться внутри окна. Окно масштабируется с помощью css-преобразования (-webkit-transform). Я пробовал что-то вроде этого:

html
<div class="window">
    <div class="rect"></div>
</div>​

css
.window
{
    width: 640px;
    height: 480px;
    background: gray;
    position: absolute;
    -webkit-transform: translate(-25%, -25%) scale(0.5);
}

.rect
{
    width: 60px;
    height: 40px;
    background: red;
}

js
$(function() {
    $('.rect').draggable({
        containment: 'parent'
    });
});​

Я разместил его здесь — http://jsfiddle.net/bLKQj/12/ движется медленнее, чем курсор. Если масштабирование будет >1, оно будет двигаться быстрее. Как это исправить?

PS: В преобразовании translate(-25%, -25%) используется масштабирование с фиксированным верхним левым углом.


scale jquery css css-transforms draggable
person DmT021    schedule 14.07.2012    source источник
comment
возможный дубликат jQuery Drag/Resize с CSS Transform Scale   -  person Martijn Pieters    schedule 15.07.2012
comment
Чтобы изменить центр вашего преобразования, предпочтительно используйте источник преобразования, а не перевод: -webkit-transform-origin: 0; /* will transform from the top left corner */.   -  person Torsten Walter    schedule 20.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сказал, зачем вам нужно использовать преобразование CSS? Вы действительно должны избегать их, когда это возможно, потому что они плохо поддерживаются и имеют такие непредвиденные последствия. Можете ли вы просто указать другую высоту и ширину?

person russtuck91    schedule 04.10.2013