jQuery draggableおよび-webkit-transform：scale（）;

Question

私は内部にはdivのアイテムがあります。しかし、親divが-webkit-transformを使用してスケーリングされている場合、ドラッグ可能オブジェクトは明らかに正しく機能しなくなります。

私はシナリオhereを再現しました。

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

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

編集：私はdrag -eventに機能を設定しようとしましたが、実際にドラッグ距離を変更する方法を見つけ出すことができませんでした。

EDIT2：私はjQueryのUIのソースを掘って、イベントdragからこれを実行する方法はありませんようだ：

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

あなたが見ることができるように、コールバック関数の戻り値いかなる方法でも格納されません。の後に要素の位置が変更されたがコールバックが発生したため、コールバック内のCSSの変更は機能しません。

あなたはこの文字列をブラウザ内検索を使用することにより、関連するコードhereを見ることができます：

_mouseDrag: function(event, noPropagation) { 

Answer 1

私は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 
     }; 

    } 

}); 

Answer 2

私はあなたが変換可能（http://plugins.jquery.com/project/transformable）jQueryのが必要だと思いますプラグインを使用して、WebKitのスケーリングを「正規化」します。 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" }); 

しかし、この時点で、私はあなたが報告し、同じ問題を取得します。