2016-09-20 7 views
0

要素の位置をドラッグした後に(TopとLeftを使用して)要素の位置を保存しようとしていますが、コンテナのサイズが異なります)。Javascript:リスケール時に親divの要素の位置を維持する

今何イムがやって、私は使用して(#ダイアグラムエディタ・キャンバス)、[保存時に、私は割合に上部と左のピクセル値を変換、ユーザーが親に周りの要素を移動しましょうということです。

var w = $("#diagram-editor-canvas").width(); 
    var h = $("#diagram-editor-canvas").height(); 
    var Xpercent = parseInt(span.style.left.split('p')[0])/w * 100; 
    var Ypercent = parseInt(span.style.top.split('p')[0])/h * 100; 

スパンは私のドラッグされた要素です。私の考えは、親コンテナのサイズが変更された場合、パーセンテージの使用は、要素が常に正しい場所にあることを確認する必要があるということです。残念ながら、これは動作しないようですか?私の要素は、ページをリロードし、保存されたパーセンテージで要素を配置すると、ランダムに配置されているように見えます。何か不足していますか?私は考慮しなければならないものがありますか?

margin: 20px; 
background-repeat: no-repeat; 
background-image: url(/uploads/schematics/3.png); 
background-size: contain; 
position: relative; 

任意のアイデア:私の親コンテナは、これらの性質を有しているが

top: 251px; 
left: 348px; 
position: absolute; 
z-index: 1000; 
transform: translate3d(0px, 0px, 0px); 
-webkit-user-select: none; 
touch-action: none; 
cursor: move; 

マイスパンドラッグ可能な要素は、このような何か(ドラッグに変える上部と左の値)になりますか? Im on a loss

答えて

0

私はばかげていましたが、保存時のパーセンテージと別のサイズでプレビューするときの両方でコンテナの新しいアスペクト比の高さを計算するのを忘れました。

関連する問題