7

内部にdivドラッグ可能なアイテムがある状況があります。ただし、親divが を使用してスケーリングされる-webkit-transformと、ドラッグ可能なものは明らかに適切に機能しなくなります。

ここでシナリオを再現しました。

ご覧のとおり、親の縮尺がまったく異なる場合でも、ドラッグ可能なアイテムはドキュメントに対して相対的に移動します。

私はJSの変数としてスケール（1.5例では）を持っているので、それを使うことができますが、どこで？ドラッグ距離をスケールで割る必要がありますよね？どこでこれを行うことができますか?

編集:関数をdrag-event に設定しようとしましたが、実際にドラッグ距離を変更する方法を理解できませんでした。

Edit2: jQuery UIソースを掘り下げましたが、イベントからこれを行う方法がないようですdrag:

if(this._trigger('drag', event, ui) === false) {
    this._mouseUp({});
    return false;
}

ご覧のとおり、コールバック関数の戻り値は保存されません。要素の位置はコールバックが発生した後に変更されるため、コールバック内の CSS を変更しても機能しません。

この文字列でブラウザー内検索を使用すると、関連するコードをここで確認できます。

_mouseDrag: function(event, noPropagation) {
4

3 に答える 3

25

JavaScript の経験が少ないため、コールバックが実際に位置を変更する可能性があることに気付きませんでしreturnた。これは、JS では明らかにパラメーターがデフォルトで参照によって渡されるためです。

作業コードは次のとおりです。

// Couldn't figure out a way to use the coordinates
// that jQuery also stores, so let's record our own.
var click = {
    x: 0,
    y: 0
};

$('.draggable').draggable({

    start: function(event) {
        click.x = event.clientX;
        click.y = event.clientY;
    },

    drag: function(event, ui) {

        // This is the parameter for scale()
        var zoom = 1.5;

        var original = ui.originalPosition;

        // jQuery will simply use the same object we alter here
        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom,
            top:  (event.clientY - click.y + original.top ) / zoom
        };

    }

});
于 2012-12-15T10:20:00.650 に答える
-1

WebKit スケーリングを「正規化」するには、Transformable (http://plugins.jquery.com/project/transformable) jQuery プラグインが必要だと思います。その後、ドラッグは Firefox と同じように機能します。

ここにプラグインがあります - http://flin.org/js/jquery.transformable.js。私はそれがあなたの問題を解決するはずだと思います。ここにあなたのコードの私のバージョンがあります: http://jsfiddle.net/vMaXm/4/

$("#parent").setTransform("scalex", 1.5);
//$("#parent").setTransform("scaley", 1.5);
$('.draggable').draggable({ containment: "parent" });

</p>

ただし、現時点では、中央の行のコメントを外すと、報告されたのと同じ問題が発生します。

于 2012-12-14T16:22:14.897 に答える