4

私は現在、jquery-ui複数の子を含む大きなdivがあるプロジェクトに取り組んでいます。これらの子divは、ユーザーが以前に作成し、縮小して（元のサイズの約20％に）、ユーザーが好きなように配置できる大きなdivに配置するという考え方です。

私の問題は、スケーリング後、子divを親内のすべての場所にドラッグできないことです。むしろ、親にスケーリング変換が適用されていなくても、親の縮小バージョンに制約されているように見えます。

このフィドルは問題を示しています：http：//jsfiddle.net/yRNqu/（青いボックスを右端または下にドラッグしてみてください）

他の誰かがこの問題に遭遇しましたか？ポインタを1つか2ついただければ幸いです。

ありがとう

HTML：

<html>
    <div class="container">
        <div class="box"></div>
    </div>
</html>

CSS：

.container{
    height:500px;
    width: 500px;  
    background-color: red;

}
.box{
    height:100px;
    width: 100px;
    background-color: blue;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

jQ 1.9 + jQ UI：

$(function() {
    $('.box').draggable({
        containment: 'parent'
    });
});
4

2 に答える 2

4

JQuery UI は、CSS のスケーリングと回転を操作するほどスマートではありません。これは、報告された境界ボックスがそのコンテキストでは無意味になることに依存しているためです。

これは別の SO の質問で、試してみるべき回避策がたくさんあります: Dragging & Resizing CSS Transformed Elements

この問題を直接解決することを目的としたプラグインを見つけることができるいくつかの答えがあります。

于 2013-02-10T04:26:55.570 に答える
1

これはjQueryバグトラッカーに提出されましたが、約3か月前に修正されないため、クローズされました。

これについては会議で話し合いましたが、CSS変換は、予測可能な機能[sic]でいつでもサポートする予定ではないため、これをwontfixとして閉じます。

于 2013-02-10T04:32:42.410 に答える